@vonage/vvd-scheme - npm Package Compare versions

Comparing version 0.16.2 to 0.17.0

CHANGELOG.md

@@ -1,9 +0,14 @@
-## [0.16.2](https://github.com/vonage/vivid/compare/v0.16.1...v0.16.2) (2020-11-26)
+# [0.17.0](https://github.com/vonage/vivid/compare/v0.16.2...v0.17.0) (2020-12-06)
 
 
+### Features
 
-## v0.16.2 (2020-11-26)
+* **scheme:** valueChanges observable API ([#456](https://github.com/vonage/vivid/issues/456)) ([5e84898](https://github.com/vonage/vivid/commit/5e84898927a4ca6ec9fbe7e0380872e9c58b70a5))
 
 
 
+## [0.16.2](https://github.com/vonage/vivid/compare/v0.16.1...v0.16.2) (2020-11-26)
+
+
+
 ## [0.16.1](https://github.com/vonage/vivid/compare/v0.16.0...v0.16.1) (2020-11-24)
@@ -10,0 +15,0 @@

os-sync.utils.d.ts

@@ -1,4 +0,4 @@
-import { PredefinedScheme } from './vvd-scheme';
+import { PredefinedScheme } from './vvd-scheme-foundation';
 export declare const pcs: MediaQueryList;
 export declare function getPreferedColorScheme(): PredefinedScheme;
 export declare function prefersColorSchemeSupported(): boolean;

os-sync.utils.js

@@ -0,4 +1,5 @@
+import { PredefinedScheme } from './vvd-scheme-foundation';
 export const pcs = window.matchMedia('(prefers-color-scheme: dark)');
 export function getPreferedColorScheme() {
-    return pcs.matches ? 'dark' : 'light';
+    return pcs.matches ? PredefinedScheme.DARK : PredefinedScheme.LIGHT;
 }
@@ -5,0 +6,0 @@ export function prefersColorSchemeSupported() {

package.json

 {
 	"name": "@vonage/vvd-scheme",
-	"version": "0.16.2",
+	"version": "0.17.0",
 	"description": "Vivid scheme management service",
@@ -26,6 +26,6 @@ "author": "yinonov <[e-mail]>",
 	"devDependencies": {
-		"@vonage/vvd-design-tokens": "^0.16.2",
+		"@vonage/vvd-design-tokens": "^0.17.0",
 		"lit-element": "^2.4.0"
 	},
-	"gitHead": "8c9cdea6a640ae1ae02c1105d87a1a5971ae0fd6"
+	"gitHead": "66beb3bbccfd57c62abe9fcab0d1adf86efdada9"
 }

pre-scheme-loading.css.d.ts

@@ -1,1 +0,1 @@
-export declare const preSchemeLoadingCssText = "vwc-audio, vwc-badge, vwc-button, vwc-carousel-item, vwc-carousel, vwc-checkbox, vwc-chip-set, vwc-chip, vwc-circular-progress, vwc-drawer, vwc-fab, vwc-file-picker, vwc-formfield, vwc-icon, vwc-keypad, vwc-linear-progress, vwc-check-list-item, vwc-list-item, vwc-list, vwc-radio-list-item, vwc-media-controller, vwc-menu, mwc-chip-set, mwc-chip, vwc-notched-outline, vwc-note, vwc-radio, vwc-relative-time, vwc-scheme-select, vwc-select, vwc-slider, vwc-switch, vwc-textarea, vwc-textfield, vwc-theme-switch, vwc-top-app-bar-fixed, vwc-top-app-bar {\n\t\t\tvisibility: hidden;\n\t\t}";
+export declare const preSchemeLoadingCssText = "vwc-audio, vwc-badge, vwc-button, vwc-carousel-item, vwc-carousel, vwc-checkbox, vwc-chip-set, vwc-chip, vwc-circular-progress, vwc-drawer, vwc-fab, vwc-file-picker, vwc-formfield, vwc-icon-button-toggle, vwc-icon-button, vwc-icon, vwc-keypad, vwc-linear-progress, vwc-check-list-item, vwc-list-item, vwc-list, vwc-radio-list-item, vwc-media-controller, vwc-menu, mwc-chip-set, mwc-chip, vwc-notched-outline, vwc-note, vwc-radio, vwc-relative-time, vwc-scheme-select, vwc-select, vwc-slider, vwc-switch, vwc-tab-bar, vwc-tab, vwc-textarea, vwc-textfield, vwc-theme-switch, vwc-top-app-bar-fixed, vwc-top-app-bar {\n\t\t\tvisibility: hidden;\n\t\t}";

pre-scheme-loading.css.js

@@ -1,4 +0,4 @@
-export const preSchemeLoadingCssText = `vwc-audio, vwc-badge, vwc-button, vwc-carousel-item, vwc-carousel, vwc-checkbox, vwc-chip-set, vwc-chip, vwc-circular-progress, vwc-drawer, vwc-fab, vwc-file-picker, vwc-formfield, vwc-icon, vwc-keypad, vwc-linear-progress, vwc-check-list-item, vwc-list-item, vwc-list, vwc-radio-list-item, vwc-media-controller, vwc-menu, mwc-chip-set, mwc-chip, vwc-notched-outline, vwc-note, vwc-radio, vwc-relative-time, vwc-scheme-select, vwc-select, vwc-slider, vwc-switch, vwc-textarea, vwc-textfield, vwc-theme-switch, vwc-top-app-bar-fixed, vwc-top-app-bar {
+export const preSchemeLoadingCssText = `vwc-audio, vwc-badge, vwc-button, vwc-carousel-item, vwc-carousel, vwc-checkbox, vwc-chip-set, vwc-chip, vwc-circular-progress, vwc-drawer, vwc-fab, vwc-file-picker, vwc-formfield, vwc-icon-button-toggle, vwc-icon-button, vwc-icon, vwc-keypad, vwc-linear-progress, vwc-check-list-item, vwc-list-item, vwc-list, vwc-radio-list-item, vwc-media-controller, vwc-menu, mwc-chip-set, mwc-chip, vwc-notched-outline, vwc-note, vwc-radio, vwc-relative-time, vwc-scheme-select, vwc-select, vwc-slider, vwc-switch, vwc-tab-bar, vwc-tab, vwc-textarea, vwc-textfield, vwc-theme-switch, vwc-top-app-bar-fixed, vwc-top-app-bar {
 			visibility: hidden;
 		}`;
 //# sourceMappingURL=pre-scheme-loading.css.js.map

scheme.dark.css.js

 import { css } from 'lit-element';
-export const style = css `body,::part(vvd-theme-base){--vvd-color-base: rgb(26,26,26);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(26,26,26);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}::part(vvd-theme-alternate){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(135,30,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(22,118,41);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(205,13,13);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(14,101,194);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(187,30,137);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}`;
+export const style = css `body,::part(vvd-theme-base){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(0,0,0);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(0,0,0);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(0,0,0);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(0,0,0);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(0,0,0);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}::part(vvd-theme-alternate){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(0,0,0);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(0,0,0);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(0,0,0);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(0,0,0);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(0,0,0);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}`;
 //# sourceMappingURL=scheme.dark.css.js.map

scheme.light.css.js

 import { css } from 'lit-element';
-export const style = css `body,::part(vvd-theme-base){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}::part(vvd-theme-alternate){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(183,126,249);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(50,175,76);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(251,106,106);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(43,158,250);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(234,107,193);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}`;
+export const style = css `body,::part(vvd-theme-base){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}::part(vvd-theme-alternate){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}`;
 //# sourceMappingURL=scheme.light.css.js.map

src/os-sync.utils.ts

@@ -1,2 +0,2 @@
-import { PredefinedScheme } from './vvd-scheme';
+import { PredefinedScheme } from './vvd-scheme-foundation';
 
@@ -6,3 +6,3 @@ export const pcs = window.matchMedia('(prefers-color-scheme: dark)');
 export function getPreferedColorScheme(): PredefinedScheme {
-	return pcs.matches ? 'dark' : 'light';
+	return pcs.matches ? PredefinedScheme.DARK : PredefinedScheme.LIGHT;
 }
@@ -9,0 +9,0 @@

src/scheme.dark.css.ts

 import {css} from 'lit-element';
 
-export const style = css`body,::part(vvd-theme-base){--vvd-color-base: rgb(26,26,26);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(26,26,26);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}::part(vvd-theme-alternate){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(135,30,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(22,118,41);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(205,13,13);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(14,101,194);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(187,30,137);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}`;
+export const style = css`body,::part(vvd-theme-base){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(0,0,0);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(0,0,0);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(0,0,0);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(0,0,0);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(0,0,0);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}::part(vvd-theme-alternate){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(0,0,0);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(0,0,0);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(0,0,0);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(0,0,0);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(0,0,0);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}`;

src/scheme.light.css.ts

 import {css} from 'lit-element';
 
-export const style = css`body,::part(vvd-theme-base){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}::part(vvd-theme-alternate){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(183,126,249);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(50,175,76);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(251,106,106);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(43,158,250);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(234,107,193);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}`;
+export const style = css`body,::part(vvd-theme-base){--vvd-color-base: rgb(255,255,255);--vvd-color-on-base: rgb(0,0,0);--vvd-color-surface: rgb(242,242,242);--vvd-color-on-surface: rgb(0,0,0);--vvd-color-primary: rgb(0,0,0);--vvd-color-on-primary: rgb(255,255,255);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(230,230,230);--vvd-color-contrast-soft: rgb(204,204,204);--vvd-color-contrast-tinged: rgb(179,179,179);--vvd-color-contrast-dim: rgb(153,153,153);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(102,102,102)}::part(vvd-theme-alternate){--vvd-color-base: rgb(0,0,0);--vvd-color-on-base: rgb(255,255,255);--vvd-color-surface: rgb(13,13,13);--vvd-color-on-surface: rgb(255,255,255);--vvd-color-primary: rgb(255,255,255);--vvd-color-on-primary: rgb(0,0,0);--vvd-color-cta: rgb(153,65,255);--vvd-color-on-cta: rgb(255,255,255);--vvd-color-success: rgb(28,135,49);--vvd-color-on-success: rgb(255,255,255);--vvd-color-alert: rgb(230,29,29);--vvd-color-on-alert: rgb(255,255,255);--vvd-color-info: rgb(2,118,213);--vvd-color-on-info: rgb(255,255,255);--vvd-color-announcement: rgb(214,33,156);--vvd-color-on-announcement: rgb(255,255,255);--vvd-color-contrast-faint: rgb(26,26,26);--vvd-color-contrast-soft: rgb(51,51,51);--vvd-color-contrast-tinged: rgb(77,77,77);--vvd-color-contrast-dim: rgb(102,102,102);--vvd-color-contrast-neutral: rgb(117,117,117);--vvd-color-contrast-tinted: rgb(153,153,153)}`;

src/vvd-scheme-style-tag-handler.ts

 import { CSSResult } from 'lit-element';
 import { preSchemeLoadingCssText } from './pre-scheme-loading.css.js';
-import { PredefinedScheme } from './vvd-scheme.js';
+import { PredefinedScheme } from './vvd-scheme-foundation';
 
@@ -13,5 +13,5 @@ type ModuleType =
 	switch (scheme) {
-		case 'dark':
+		case PredefinedScheme.DARK:
 			return import('./scheme.dark.css');
-		case 'light':
+		case PredefinedScheme.LIGHT:
 		default:
@@ -18,0 +18,0 @@ return import('./scheme.light.css');

src/vvd-scheme.ts

@@ -1,2 +0,1 @@
-import { onSchemeChange } from './scheme-change-listener';
 import { applySchemeCSS } from './vvd-scheme-style-tag-handler';
@@ -10,5 +9,17 @@
 
-export type PredefinedScheme = 'light' | 'dark';
-export type SchemeOption = 'syncWithOSSettings' | PredefinedScheme;
+import {
+	SelectedDetail,
+	PredefinedScheme,
+	AutoScheme,
+	SchemeOption,
+} from './vvd-scheme-foundation';
+export {
+	SelectedDetail,
+	PredefinedScheme,
+	AutoScheme,
+	SchemeOption,
+} from './vvd-scheme-foundation';
 
+const eventBus = new EventTarget();
+
 let _selectedScheme: PredefinedScheme;
@@ -30,3 +41,3 @@ function getSelectedScheme(): PredefinedScheme {
 	// ! 2. we still have no control over application scheme mode context
-	return 'light';
+	return PredefinedScheme.LIGHT;
 }
@@ -48,11 +59,5 @@
 
-function init(): void {
-	onSchemeChange(async (scheme: SchemeOption) => {
-		set(scheme);
-	});
-}
-
 function setSyncModeIfRelevant(scheme: SchemeOption): PredefinedScheme {
 	let result: SchemeOption;
-	if (scheme === 'syncWithOSSettings') {
+	if (scheme === AutoScheme.SYNC_WITH_OS_SETTINGS) {
 		pcs.addListener(syncWithOSSettings);
@@ -68,2 +73,3 @@ result = getPreferedColorScheme() as PredefinedScheme;
 let setPromise: Promise<Record<string, unknown>> | null = null;
+
 async function set(
@@ -97,2 +103,4 @@ schemeOption: SchemeOption | null = null
 		// console.info('... scheme changed');
+		notifySelected(_selectedScheme);
+
 		return {
@@ -107,4 +115,15 @@ option: _selectedSchemeOption,
 
+function notifySelected(scheme: SchemeOption) {
+	const ev = new CustomEvent<SelectedDetail>('vvd-scheme-select', {
+		detail: { scheme },
+	});
+	eventBus.dispatchEvent(ev);
+}
+
+/**
+ * @fires selected {SelectedDetail}
+ */
 export default Object.freeze({
 	set,
+	eventBus,
 	getSelectedScheme,
@@ -114,6 +133,4 @@ getSelectedSchemeOption,
 
-init();
-
 //TODO add the following tests:
 //!scheme change event
 //!add / remove Listener when toggling 'syncWithOSSettings' selected option

vvd-scheme-style-tag-handler.d.ts

@@ -1,2 +0,2 @@
-import { PredefinedScheme } from './vvd-scheme.js';
+import { PredefinedScheme } from './vvd-scheme-foundation';
 export declare function applySchemeCSS(scheme: PredefinedScheme): Promise<void>;

vvd-scheme-style-tag-handler.js

 import { preSchemeLoadingCssText } from './pre-scheme-loading.css.js';
+import { PredefinedScheme } from './vvd-scheme-foundation';
 const getSchemeModule = (scheme) => {
     switch (scheme) {
-        case 'dark':
+        case PredefinedScheme.DARK:
             return import('./scheme.dark.css');
-        case 'light':
+        case PredefinedScheme.LIGHT:
         default:
@@ -8,0 +9,0 @@ return import('./scheme.light.css');

vvd-scheme.d.ts

@@ -1,3 +0,3 @@
-export declare type PredefinedScheme = 'light' | 'dark';
-export declare type SchemeOption = 'syncWithOSSettings' | PredefinedScheme;
+import { PredefinedScheme, SchemeOption } from './vvd-scheme-foundation';
+export { SelectedDetail, PredefinedScheme, AutoScheme, SchemeOption, } from './vvd-scheme-foundation';
 declare function getSelectedScheme(): PredefinedScheme;
@@ -8,5 +8,9 @@ declare function getSelectedSchemeOption(): SchemeOption;
     set: typeof set;
+    eventBus: EventTarget;
     getSelectedScheme: typeof getSelectedScheme;
     getSelectedSchemeOption: typeof getSelectedSchemeOption;
 }>;
+/**
+ * @fires selected {SelectedDetail}
+ */
 export default _default;

vvd-scheme.js

@@ -1,4 +0,6 @@
-import { onSchemeChange } from './scheme-change-listener';
 import { applySchemeCSS } from './vvd-scheme-style-tag-handler';
 import { pcs, getPreferedColorScheme, } from './os-sync.utils';
+import { PredefinedScheme, AutoScheme, } from './vvd-scheme-foundation';
+export { PredefinedScheme, AutoScheme, } from './vvd-scheme-foundation';
+const eventBus = new EventTarget();
 let _selectedScheme;
@@ -18,3 +20,3 @@ function getSelectedScheme() {
     // ! 2. we still have no control over application scheme mode context
-    return 'light';
+    return PredefinedScheme.LIGHT;
 }
@@ -31,10 +33,5 @@ function getEffectiveSchemeOption(destOption = null) {
 }
-function init() {
-    onSchemeChange(async (scheme) => {
-        set(scheme);
-    });
-}
 function setSyncModeIfRelevant(scheme) {
     let result;
-    if (scheme === 'syncWithOSSettings') {
+    if (scheme === AutoScheme.SYNC_WITH_OS_SETTINGS) {
         pcs.addListener(syncWithOSSettings);
@@ -70,2 +67,3 @@ result = getPreferedColorScheme();
         // console.info('... scheme changed');
+        notifySelected(_selectedScheme);
         return {
@@ -78,8 +76,17 @@ option: _selectedSchemeOption,
 }
+function notifySelected(scheme) {
+    const ev = new CustomEvent('vvd-scheme-select', {
+        detail: { scheme },
+    });
+    eventBus.dispatchEvent(ev);
+}
+/**
+ * @fires selected {SelectedDetail}
+ */
 export default Object.freeze({
     set,
+    eventBus,
     getSelectedScheme,
     getSelectedSchemeOption,
 });
-init();
 //TODO add the following tests:
@@ -86,0 +93,0 @@ //!scheme change event

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

207643

increased by0.13%

Lines of code

588

increased by3.16%

No dependency changes