@filip.mazev/blocks 1.4.9 → 1.4.11

package/core/styles/themes/_high-contrast-theme.scss

@@ -12,12 +12,22 @@ $high-contrast-light-theme: validate-theme(
         'bg-neutral': $hc-white,
         'bg-neutral-hover': get-color-from-palette('neutral', 50),
         'bg-neutral-active': get-color-from-palette('neutral', 100),
-
         'primary': $hc-black,
         'primary-hover': $hc-black,
         'primary-active': $hc-black,
         'primary-subtle': $hc-white,
         'on-primary': $hc-white,
+        'on-primary-hover': $hc-white,
+        'on-primary-active': $hc-white,
+        'accent': $hc-black,
+        'accent-hover': $hc-black,
+        'accent-active': $hc-black,
+        'accent-subtle': $hc-white,
+        'on-accent': $hc-white,
+        'on-accent-hover': $hc-white,
+        'on-accent-active': $hc-white,
+        'text-accent': $hc-black,
+        'border-accent': $hc-black,
 
         'text-heading': $hc-black,
         'text-primary': $hc-black,
@@ -28,7 +38,6 @@ $high-contrast-light-theme: validate-theme(
         'text-success': get-color-from-palette('success', 800),
         'text-warn': get-color-from-palette('warn', 800),
         'text-danger': get-color-from-palette('danger', 700),
-
         'border-subtle': $hc-black,
         'border-default': $hc-black,
         'border-strong': $hc-black,
@@ -65,8 +74,8 @@ $high-contrast-light-theme: validate-theme(
         'scroll-bg': $hc-white,
         'scroll-thumb': $hc-black,
         'scroll-thumb-hover': get-color-from-palette('neutral', 700),
-
         'meta-brand-palette': 'neutral',
+        'meta-accent-palette': 'neutral',
     ),
     'high-contrast-light'
 ) !default;
@@ -81,12 +90,22 @@ $high-contrast-dark-theme: validate-theme(
         'bg-neutral': $hc-black,
         'bg-neutral-hover': get-color-from-palette('neutral', 1000),
         'bg-neutral-active': get-color-from-palette('neutral', 1000),
-
         'primary': $hc-white,
         'primary-hover': $hc-white,
         'primary-active': $hc-white,
         'primary-subtle': $hc-black,
         'on-primary': $hc-black,
+        'on-primary-hover': $hc-black,
+        'on-primary-active': $hc-black,
+        'accent': $hc-white,
+        'accent-hover': $hc-white,
+        'accent-active': $hc-white,
+        'accent-subtle': $hc-black,
+        'on-accent': $hc-black,
+        'on-accent-hover': $hc-black,
+        'on-accent-active': $hc-black,
+        'text-accent': $hc-white,
+        'border-accent': $hc-white,
 
         'text-heading': $hc-white,
         'text-primary': $hc-white,
@@ -134,13 +153,12 @@ $high-contrast-dark-theme: validate-theme(
         'scroll-bg': $hc-black,
         'scroll-thumb': $hc-white,
         'scroll-thumb-hover': get-color-from-palette('neutral', 300),
-
         'meta-brand-palette': 'neutral',
+        'meta-accent-palette': 'neutral',
     ),
     'high-contrast-dark'
 ) !default;
 
-// The Blocks high-contrast palette is an explicit accessibility choice, independent of OS media queries.
 :where(.high-contrast, .bx-high-contrast-scope) {
     [data-bx-surface] {
         color: var(--bx-glass-text, var(--bx-text-primary)) !important;
@@ -154,6 +172,7 @@ $high-contrast-dark-theme: validate-theme(
     [data-bx-surface],
     .bx-glass-material {
         background: var(--bx-glass-surface, var(--bx-bg-surface)) !important;
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Required to disable glass in older Safari. */
         -webkit-backdrop-filter: none !important;
         backdrop-filter: none !important;
         box-shadow: none !important;

package/core/styles/themes/_lime-violet-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$lime-violet-light-theme: make-light-theme('lime', 'cool-violet');
+$lime-violet-dark-theme: make-dark-theme('lime', 'cool-violet');

package/core/styles/themes/_orange-theme.scss

@@ -1,4 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'tangerine-indigo-theme' as paired;
 
-$orange-light-theme: make-light-theme('orange');
-$orange-dark-theme: make-dark-theme('orange');
+$orange-light-theme: paired.$tangerine-indigo-light-theme;
+$orange-dark-theme: paired.$tangerine-indigo-dark-theme;

package/core/styles/themes/_purple-theme.scss

@@ -1,4 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'violet-teal-theme' as paired;
 
-$purple-light-theme: make-light-theme('purple');
-$purple-dark-theme: make-dark-theme('purple');
+$purple-light-theme: paired.$violet-teal-light-theme;
+$purple-dark-theme: paired.$violet-teal-dark-theme;

package/core/styles/themes/_red-theme.scss

@@ -1,4 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'scarlet-cyan-theme' as paired;
 
-$red-light-theme: make-light-theme('red');
-$red-dark-theme: make-dark-theme('red');
+$red-light-theme: paired.$scarlet-cyan-light-theme;
+$red-dark-theme: paired.$scarlet-cyan-dark-theme;

package/core/styles/themes/_scarlet-cyan-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$scarlet-cyan-light-theme: make-light-theme('scarlet', 'cyan');
+$scarlet-cyan-dark-theme: make-dark-theme('scarlet', 'cyan');

package/core/styles/themes/_tangerine-indigo-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$tangerine-indigo-light-theme: make-light-theme('tangerine', 'indigo');
+$tangerine-indigo-dark-theme: make-dark-theme('tangerine', 'indigo');

package/core/styles/themes/_violet-teal-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$violet-teal-light-theme: make-light-theme('violet', 'teal');
+$violet-teal-dark-theme: make-dark-theme('violet', 'teal');

package/core/styles/themes/_white-theme.scss

@@ -1,28 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'graphite-sky-blue-theme' as paired;
 
-$white-light-theme: make-light-theme(
-    'neutral',
-    $overrides: (
-        'primary': #525252,
-        'primary-hover': #404040,
-        'primary-active': #262626,
-        'primary-subtle': rgba(#737373, 0.12),
-        'on-primary': #ffffff,
-        'text-brand': #404040,
-        'border-brand': #737373,
-    )
-);
-$white-dark-theme: make-dark-theme(
-    'neutral',
-    $overrides: (
-        'primary': #ffffff,
-        'primary-hover': #e5e5e5,
-        'primary-active': #d4d4d4,
-        'primary-subtle': rgba(#ffffff, 0.12),
-        'on-primary': #171717,
-        'text-brand': #f5f5f5,
-        'border-brand': #d4d4d4,
-        'scroll-thumb': #737373,
-        'scroll-thumb-hover': #a3a3a3,
-    )
-);
+$white-light-theme: paired.$graphite-sky-blue-light-theme;
+$white-dark-theme: paired.$graphite-sky-blue-dark-theme;

package/fesm2022/filip.mazev-blocks-core.mjs

@@ -5,7 +5,7 @@ import { fromEvent } from "rxjs";
 import { debounceTime, distinctUntilChanged, map } from "rxjs/operators";
 import { toObservable } from "@angular/core/rxjs-interop";
 import { configureAppearance } from "@filip.mazev/blocks/effects/runtime";
-import { ConnectionPositionPair, Overlay } from "@angular/cdk/overlay";
+import { ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay } from "@angular/cdk/overlay";
 import { NgControl, Validators } from "@angular/forms";
 var DesktopOS;
 (function(DesktopOS) {
@@ -348,38 +348,63 @@ const DEFAULT_APPEARANCE_CONFIG = Object.freeze({
 	quality: "auto",
 	reducedTransparency: false
 });
+const LEGACY_THEME_IDS = {
+	white: "graphite-sky-blue",
+	blue: "azure-coral",
+	purple: "violet-teal",
+	orange: "tangerine-indigo",
+	red: "scarlet-cyan",
+	green: "lime-violet"
+};
 const THEME_PALETTES = [
 	{
-		id: "white",
-		label: "White",
-		className: "theme-white"
+		id: "graphite-sky-blue",
+		label: "Graphite / Sky Blue",
+		className: "theme-graphite-sky-blue",
+		colors: ["#525252", "#38bdf8"]
+	},
+	{
+		id: "azure-coral",
+		label: "Azure / Coral",
+		className: "theme-azure-coral",
+		colors: ["#217eff", "#f87763"]
 	},
 	{
-		id: "purple",
-		label: "Purple",
-		className: "theme-purple"
+		id: "violet-teal",
+		label: "Violet / Teal",
+		className: "theme-violet-teal",
+		colors: ["#6d00ff", "#0d9488"]
 	},
 	{
-		id: "orange",
-		label: "Orange",
-		className: "theme-orange"
+		id: "tangerine-indigo",
+		label: "Tangerine / Indigo",
+		className: "theme-tangerine-indigo",
+		colors: ["#ff6900", "#4f78f5"]
 	},
 	{
-		id: "red",
-		label: "Red",
-		className: "theme-red"
+		id: "scarlet-cyan",
+		label: "Scarlet / Cyan",
+		className: "theme-scarlet-cyan",
+		colors: ["#e3241b", "#0891b2"]
 	},
 	{
-		id: "green",
-		label: "Green",
-		className: "theme-green"
+		id: "lime-violet",
+		label: "Lime / Violet",
+		className: "theme-lime-violet",
+		colors: ["#c4f53d", "#6842a6"]
 	},
 	{
 		id: "cyberpunk",
 		label: "Cyberpunk",
-		className: "theme-cyberpunk"
+		className: "theme-cyberpunk",
+		colors: ["#3e5669", "#e6da00"]
 	}
 ];
+function resolveThemeId(value) {
+	const palette = THEME_PALETTES.find((item) => item.id === value);
+	if (palette) return palette.id;
+	if (value && Object.prototype.hasOwnProperty.call(LEGACY_THEME_IDS, value)) return LEGACY_THEME_IDS[value];
+}
 var BxA11yService = class BxA11yService {
 	document = inject(DOCUMENT$1);
 	platformId = inject(PLATFORM_ID);
@@ -452,7 +477,7 @@ var ThemingService = class ThemingService {
 	_appearance = signal({ ...DEFAULT_APPEARANCE_CONFIG }, ...ngDevMode ? [{ debugName: "_appearance" }] : /* istanbul ignore next */ []);
 	appearance = this._appearance.asReadonly();
 	palettes = THEME_PALETTES;
-	_palette = signal("white", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
+	_palette = signal("graphite-sky-blue", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
 	palette = this._palette.asReadonly();
 	paletteLabel = computed(() => this.palettes.find((item) => item.id === this.palette())?.label ?? this.palettes[0].label, ...ngDevMode ? [{ debugName: "paletteLabel" }] : /* istanbul ignore next */ []);
 	_highContrast = signal(false, ...ngDevMode ? [{ debugName: "_highContrast" }] : /* istanbul ignore next */ []);
@@ -480,7 +505,7 @@ var ThemingService = class ThemingService {
 			this.restoreAppearance();
 			const palette = this.readStored("theme-palette");
 			const storedHighContrast = this.readStored("theme-high-contrast");
-			this.setPalette(this.palettes.some((item) => item.id === palette) ? palette : "white");
+			this.setPalette(resolveThemeId(palette) ?? "graphite-sky-blue");
 			this.setHighContrast(storedHighContrast === null ? palette === "high-contrast" : storedHighContrast === "true");
 			this.appearanceController = configureAppearance(this.document.documentElement, {
 				...this.appearance(),
@@ -499,10 +524,12 @@ var ThemingService = class ThemingService {
 		if (this.isBrowser) this.writeStored("theme", theme);
 	}
 	setPalette(palette) {
-		if (!this.palettes.some((item) => item.id === palette)) return;
-		this._palette.set(palette);
-		for (const item of this.palettes) this.document.documentElement.classList.toggle(item.className, item.id === palette);
-		if (this.isBrowser) this.writeStored("theme-palette", palette);
+		const id = resolveThemeId(palette);
+		if (!id) return;
+		this._palette.set(id);
+		for (const legacy of Object.keys(LEGACY_THEME_IDS)) this.document.documentElement.classList.remove(`theme-${legacy}`);
+		for (const item of this.palettes) this.document.documentElement.classList.toggle(item.className, item.id === id);
+		if (this.isBrowser) this.writeStored("theme-palette", id);
 	}
 	setHighContrast(enabled) {
 		this._highContrast.set(enabled);
@@ -970,11 +997,29 @@ i0.ɵɵngDeclareClassMetadata({
 const DEFAULT_DEBOUNCE_TIME = 300;
 const SCROLL_LOCK_INSTANCE_IDENTIFIER = "scroll_lock_instance_";
 const PALETTE_NAMES = [
+	"primary",
+	"accent",
+	"graphite",
+	"sky-blue",
+	"azure",
+	"coral",
+	"violet",
+	"teal",
+	"tangerine",
+	"indigo",
+	"scarlet",
+	"cyan",
+	"lime",
+	"cool-violet",
+	"cyber-yellow",
+	"cyber-slate",
+	"blue",
 	"orange",
 	"purple",
 	"red",
 	"green",
 	"danger",
+	"warn",
 	"success",
 	"information",
 	"neutral"
@@ -1008,6 +1053,17 @@ const SEMANTIC_PAIRS = {
 	"text-brand": "bg-surface",
 	"text-inverse": "primary",
 	"on-primary": "primary",
+	"on-primary-hover": "primary-hover",
+	"on-primary-active": "primary-active",
+	accent: "accent-subtle",
+	"accent-hover": "on-accent-hover",
+	"accent-active": "on-accent-active",
+	"accent-subtle": "text-accent",
+	"on-accent": "accent",
+	"on-accent-hover": "accent-hover",
+	"on-accent-active": "accent-active",
+	"text-accent": "accent-subtle",
+	"border-accent": "bg-surface",
 	primary: "primary-subtle",
 	"primary-hover": "on-primary",
 	"primary-active": "on-primary",
@@ -1090,23 +1146,22 @@ function inheritOverlayTheme(source, pane) {
 	const copied = /* @__PURE__ */ new Set();
 	const refresh = () => {
 		const styles = win.getComputedStyle(source);
+		const inherited = win.getComputedStyle(pane.parentElement ?? pane);
 		const current = /* @__PURE__ */ new Set();
 		for (let index = 0; index < styles.length; index++) {
 			const property = styles.item(index);
-			if (property.startsWith("--bx-") && property !== "--bx-glassiness" && (!property.startsWith("--bx-glass-") || property === "--bx-glass-radius")) {
-				pane.style.setProperty(property, styles.getPropertyValue(property));
-				current.add(property);
+			if (property.startsWith("--")) {
+				const value = styles.getPropertyValue(property);
+				if (value !== inherited.getPropertyValue(property)) {
+					pane.style.setProperty(property, value);
+					current.add(property);
+				}
 			}
 		}
 		for (const property of copied) if (!current.has(property)) pane.style.removeProperty(property);
 		copied.clear();
 		current.forEach((property) => copied.add(property));
-		pane.style.setProperty("--bx-glass-surface", "var(--bx-bg-surface)");
-		pane.style.setProperty("--bx-glass-text", "var(--bx-text-primary)");
-		pane.style.setProperty("--bx-glass-edge", "var(--bx-border-subtle)");
-		pane.style.setProperty("--bx-glass-accent", "var(--bx-primary)");
 		pane.classList.toggle("bx-high-contrast-scope", !!source.closest(".high-contrast, .bx-high-contrast-scope"));
-		pane.style.color = "var(--bx-text-primary)";
 		pane.style.fontFamily = styles.fontFamily;
 		pane.style.colorScheme = styles.colorScheme;
 	};
@@ -1126,6 +1181,61 @@ function inheritOverlayTheme(source, pane) {
 	});
 	return () => observer.disconnect();
 }
-export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_APPEARANCE_CONFIG, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, THEME_PALETTES, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, inheritOverlayTheme, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveTokenToCssVar, uuidv4 };
+let nextAnchor = 0;
+function trackOverlayOrigin(overlay, origin) {
+	const view = origin.ownerDocument.defaultView;
+	const strategy = overlay.getConfig().positionStrategy;
+	if (!view || !(strategy instanceof FlexibleConnectedPositionStrategy)) return () => {};
+	const host = overlay.hostElement;
+	const anchor = view.CSS?.supports("position-anchor", "--bx-origin") && !!(origin.compareDocumentPosition(host) & Node.DOCUMENT_POSITION_FOLLOWING) ? `--bx-overlay-origin-${++nextAnchor}` : null;
+	const originalAnchor = origin.style.getPropertyValue("anchor-name");
+	const originalPriority = origin.style.getPropertyPriority("anchor-name");
+	if (anchor) {
+		const names = view.getComputedStyle(origin).getPropertyValue("anchor-name").trim();
+		origin.style.setProperty("anchor-name", names && names !== "none" ? `${names}, ${anchor}` : anchor);
+		host.style.setProperty("position-anchor", anchor);
+	}
+	const reposition = () => {
+		if (!overlay.hasAttached()) return;
+		if (!anchor) {
+			strategy.reapplyLastPosition();
+			return;
+		}
+		host.classList.remove("bx-overlay-anchored");
+		overlay.updatePosition();
+		const source = origin.getBoundingClientRect();
+		const target = host.getBoundingClientRect();
+		host.style.setProperty("--bx-overlay-anchor-top", `calc(anchor(top) + ${target.top - source.top}px)`);
+		host.style.setProperty("--bx-overlay-anchor-left", `calc(anchor(left) + ${target.left - source.left}px)`);
+		host.classList.add("bx-overlay-anchored");
+	};
+	const onScroll = (event) => {
+		const target = event.target;
+		if (target === view || target instanceof Node && target.contains(origin)) reposition();
+	};
+	if (!anchor) view.addEventListener("scroll", onScroll, {
+		capture: true,
+		passive: true
+	});
+	view.addEventListener("resize", reposition, { passive: true });
+	const resize = new view.ResizeObserver(reposition);
+	resize.observe(origin);
+	resize.observe(overlay.overlayElement);
+	reposition();
+	return () => {
+		resize.disconnect();
+		view.removeEventListener("resize", reposition);
+		if (!anchor) view.removeEventListener("scroll", onScroll, true);
+		else {
+			host.classList.remove("bx-overlay-anchored");
+			host.style.removeProperty("position-anchor");
+			host.style.removeProperty("--bx-overlay-anchor-top");
+			host.style.removeProperty("--bx-overlay-anchor-left");
+			if (originalAnchor) origin.style.setProperty("anchor-name", originalAnchor, originalPriority);
+			else origin.style.removeProperty("anchor-name");
+		}
+	};
+}
+export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_APPEARANCE_CONFIG, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, LEGACY_THEME_IDS, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, THEME_PALETTES, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, inheritOverlayTheme, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveThemeId, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 };
 
 //# sourceMappingURL=filip.mazev-blocks-core.mjs.map