@filip.mazev/blocks 1.4.13 → 1.4.15

package/README.md

@@ -18,7 +18,7 @@ ng add @filip.mazev/blocks
 
 When you run the command above, the Angular CLI will execute our custom schematic to handle the boilerplate for you:
 
-* Palette selection: Graphite / Sky Blue is the CLI default. Azure / Coral, Violet / Teal, Tangerine / Indigo, Scarlet / Cyan, Lime / Violet, and Cyberpunk are also available. Use `--theme=azure-coral` to select Azure / Coral.
+* Palette selection: Carbon / Cobalt is the CLI default. Azure / Ember, Violet / Teal, Tangerine / Indigo, Brick Rose / Cyan, Lime / Violet, and Cyberpunk are also available. Use `--theme=azure-ember` to select Azure / Ember.
 * Dependency Management: Automatically adds the latest versions of the Blocks ecosystem to your package.json and runs npm install.
 * SCSS Injection: Intelligently locates your project's global stylesheet (styles.scss or styles.sass) and injects the required @use statements, mixins, and both light/dark mode CSS variables based on your theme selection.
 
@@ -37,11 +37,11 @@ Then, manually configure your styles.scss:
 
 @layer base {
     :root {
-        @include bx-theme($graphite-sky-blue-light-theme);
+        @include bx-theme($carbon-cobalt-light-theme);
     }
 
     [data-theme='dark'] {
-        @include bx-theme($graphite-sky-blue-dark-theme);
+        @include bx-theme($carbon-cobalt-dark-theme);
     }
 }
 ```
@@ -52,10 +52,10 @@ Then, manually configure your styles.scss:
 Use paired palette IDs consistently in the CLI and `ThemingService.setPalette()`. For example:
 
 ```sh
-ng add @filip.mazev/blocks --theme=azure-coral
+ng add @filip.mazev/blocks --theme=azure-ember
 ```
 
-The Sass exports use the same names: `$azure-coral-light-theme` and `$azure-coral-dark-theme`. Graphite / Sky Blue is the installer default; the playground starts with Graphite / Sky Blue. Previous IDs and Sass names remain aliases.
+The Sass exports use the same names: `$azure-ember-light-theme` and `$azure-ember-dark-theme`. Carbon / Cobalt is the installer default; the playground starts with Carbon / Cobalt. Only the current palette IDs and Sass names are supported.
 
 Buttons and tabs accept `color="accent"` for the second tone. Icons and custom components can use semantic tokens such as `text-accent`, `accent-subtle`, `on-accent`, and `border-accent`. Canvas backgrounds stay neutral; status roles keep their meaning. See [the palette reference](../../documentation/appearance/README.md#palettes) for all seven pairs.
 

package/core/styles/_a11y.scss

@@ -16,7 +16,7 @@
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
+        transition-duration: 0s !important;
         scroll-behavior: auto !important;
     }
 }

package/core/styles/_index.scss

@@ -4,18 +4,12 @@
 @forward 'palettes';
 @forward 'theme-engine';
 @forward 'a11y';
-@forward 'themes/graphite-sky-blue-theme';
-@forward 'themes/azure-coral-theme';
+@forward 'themes/carbon-cobalt-theme';
+@forward 'themes/azure-ember-theme';
+@forward 'themes/brick-rose-cyan-theme';
 @forward 'themes/violet-teal-theme';
 @forward 'themes/tangerine-indigo-theme';
-@forward 'themes/scarlet-cyan-theme';
 @forward 'themes/lime-violet-theme';
-@forward 'themes/white-theme';
-@forward 'themes/blue-theme';
-@forward 'themes/purple-theme';
-@forward 'themes/orange-theme';
-@forward 'themes/red-theme';
-@forward 'themes/green-theme';
 @forward 'themes/cyberpunk-theme';
 @forward 'themes/high-contrast-theme';
 @forward 'slider';

package/core/styles/_palettes.scss

@@ -180,28 +180,72 @@ $hc-yellow: #e4d500;
 $hc-cyan: #00f3f3;
 $hc-red: #ff0000;
 $hc-green: #00ff00;
-$graphite-palette: _tonal-palette(#525252) !default;
-$sky-blue-palette: _tonal-palette(#38bdf8) !default;
-$azure-palette: $blue-palette !default;
-$coral-palette: _tonal-palette(#f87763) !default;
+
+// Tune the upper tones explicitly so dark actions retain their color character.
+$carbon-palette: map.merge(
+    _tonal-palette(#292a2d),
+    (
+        50: #fdfdfc,
+        100: #f7f7f5,
+        200: #efefed,
+        300: #e2e2e0,
+        400: #77797d,
+    )
+) !default;
+$cobalt-palette: map.merge(
+    _tonal-palette(#356fe8),
+    (
+        200: #abc5ff,
+        300: #6d9aff,
+        400: #4c82f2,
+    )
+) !default;
+$ember-palette: map.merge(
+    _tonal-palette(#d85a1a),
+    (
+        200: #f5a365,
+        300: #f27b35,
+        400: #e96926,
+    )
+) !default;
+$brick-rose-palette: map.merge(
+    _tonal-palette(#b64a50),
+    (
+        200: #e69ba4,
+        300: #d36b77,
+        400: #c55964,
+    )
+) !default;
+$azure-palette: map.merge(
+    $blue-palette,
+    (
+        300: #72a7ff,
+    )
+) !default;
 $violet-palette: $purple-palette !default;
 $teal-palette: _tonal-palette(#0d9488) !default;
 $tangerine-palette: $orange-palette !default;
 $indigo-palette: _tonal-palette(#4f78f5) !default;
-$scarlet-palette: $red-palette !default;
-$cyan-palette: _tonal-palette(#0891b2) !default;
+$cyan-palette: map.merge(
+    _tonal-palette(#0891b2),
+    (
+        200: #78d8e6,
+        300: #22b8d0,
+        400: #12a4bf,
+    )
+) !default;
 $lime-palette: _tonal-palette(#c4f53d) !default;
 $cool-violet-palette: _tonal-palette(#6842a6) !default;
 $all-palettes: (
-    'graphite': $graphite-palette,
-    'sky-blue': $sky-blue-palette,
+    'carbon': $carbon-palette,
+    'cobalt': $cobalt-palette,
+    'ember': $ember-palette,
+    'brick-rose': $brick-rose-palette,
     'azure': $azure-palette,
-    'coral': $coral-palette,
     'violet': $violet-palette,
     'teal': $teal-palette,
     'tangerine': $tangerine-palette,
     'indigo': $indigo-palette,
-    'scarlet': $scarlet-palette,
     'cyan': $cyan-palette,
     'lime': $lime-palette,
     'cool-violet': $cool-violet-palette,

package/core/styles/themes/_azure-ember-theme.scss

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

package/core/styles/themes/_brick-rose-cyan-theme.scss

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

package/core/styles/themes/_carbon-cobalt-theme.scss

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

package/effects/effects.css

@@ -76,6 +76,126 @@
     pointer-events: none;
 }
 
+@property --bx-glass-environment-color-0 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-1 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-2 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-3 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-4 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-5 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-6 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-7 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-8 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-9 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-10 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-11 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-12 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-13 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-14 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+@property --bx-glass-environment-color-15 {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+.bx-glass-environment {
+    transition:
+        --bx-glass-environment-color-0 64ms linear,
+        --bx-glass-environment-color-1 64ms linear,
+        --bx-glass-environment-color-2 64ms linear,
+        --bx-glass-environment-color-3 64ms linear,
+        --bx-glass-environment-color-4 64ms linear,
+        --bx-glass-environment-color-5 64ms linear,
+        --bx-glass-environment-color-6 64ms linear,
+        --bx-glass-environment-color-7 64ms linear,
+        --bx-glass-environment-color-8 64ms linear,
+        --bx-glass-environment-color-9 64ms linear,
+        --bx-glass-environment-color-10 64ms linear,
+        --bx-glass-environment-color-11 64ms linear,
+        --bx-glass-environment-color-12 64ms linear,
+        --bx-glass-environment-color-13 64ms linear,
+        --bx-glass-environment-color-14 64ms linear,
+        --bx-glass-environment-color-15 64ms linear;
+}
+
+[data-bx-reduced-motion="true"] > .bx-glass-rim > .bx-glass-environment {
+    transition: none;
+}
+
 .bx-glass-rim {
     position: absolute;
     /* The runtime aligns this box with the host's border, including asymmetric borders. */
@@ -89,14 +209,6 @@
     opacity: var(--bx-glass-rim-visibility, 1);
 }
 
-.bx-glass-environment {
-    transition: opacity 180ms ease-out;
-}
-
-[data-bx-reduced-motion="true"] > .bx-glass-rim > .bx-glass-environment {
-    transition: none;
-}
-
 @supports (-webkit-mask-composite: xor) {
     .bx-glass-rim {
         display: block;

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

@@ -348,26 +348,18 @@ 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: "graphite-sky-blue",
-		label: "Graphite / Sky Blue",
-		className: "theme-graphite-sky-blue",
-		colors: ["#525252", "#38bdf8"]
+		id: "carbon-cobalt",
+		label: "Carbon / Cobalt",
+		className: "theme-carbon-cobalt",
+		colors: ["#292a2d", "#356fe8"]
 	},
 	{
-		id: "azure-coral",
-		label: "Azure / Coral",
-		className: "theme-azure-coral",
-		colors: ["#217eff", "#f87763"]
+		id: "azure-ember",
+		label: "Azure / Ember",
+		className: "theme-azure-ember",
+		colors: ["#217eff", "#d85a1a"]
 	},
 	{
 		id: "violet-teal",
@@ -382,10 +374,10 @@ const THEME_PALETTES = [
 		colors: ["#ff6900", "#4f78f5"]
 	},
 	{
-		id: "scarlet-cyan",
-		label: "Scarlet / Cyan",
-		className: "theme-scarlet-cyan",
-		colors: ["#e3241b", "#0891b2"]
+		id: "brick-rose-cyan",
+		label: "Brick Rose / Cyan",
+		className: "theme-brick-rose-cyan",
+		colors: ["#b64a50", "#0891b2"]
 	},
 	{
 		id: "lime-violet",
@@ -401,9 +393,7 @@ const THEME_PALETTES = [
 	}
 ];
 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];
+	return THEME_PALETTES.find((item) => item.id === value)?.id;
 }
 var BxA11yService = class BxA11yService {
 	document = inject(DOCUMENT$1);
@@ -477,7 +467,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("graphite-sky-blue", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
+	_palette = signal("carbon-cobalt", ...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 */ []);
@@ -505,7 +495,7 @@ var ThemingService = class ThemingService {
 			this.restoreAppearance();
 			const palette = this.readStored("theme-palette");
 			const storedHighContrast = this.readStored("theme-high-contrast");
-			this.setPalette(resolveThemeId(palette) ?? "graphite-sky-blue");
+			this.setPalette(resolveThemeId(palette) ?? "carbon-cobalt");
 			this.setHighContrast(storedHighContrast === null ? palette === "high-contrast" : storedHighContrast === "true");
 			this.appearanceController = configureAppearance(this.document.documentElement, {
 				...this.appearance(),
@@ -527,7 +517,6 @@ var ThemingService = class ThemingService {
 		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);
 	}
@@ -999,15 +988,15 @@ const SCROLL_LOCK_INSTANCE_IDENTIFIER = "scroll_lock_instance_";
 const PALETTE_NAMES = [
 	"primary",
 	"accent",
-	"graphite",
-	"sky-blue",
+	"carbon",
+	"cobalt",
+	"ember",
+	"brick-rose",
 	"azure",
-	"coral",
 	"violet",
 	"teal",
 	"tangerine",
 	"indigo",
-	"scarlet",
 	"cyan",
 	"lime",
 	"cool-violet",
@@ -1282,6 +1271,6 @@ function trackOverlayOrigin(overlay, origin) {
 		host.classList.remove("bx-overlay-tracked");
 	};
 }
-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 };
+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, resolveThemeId, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 };
 
 //# sourceMappingURL=filip.mazev-blocks-core.mjs.map