@filip.mazev/blocks 1.4.3 → 1.4.5

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

@@ -1,151 +1,170 @@
 @use '../palettes' as *;
 @use '../theme-engine' as *;
 
-$high-contrast-light-theme: validate-theme(('bg-canvas': $hc-white,
-            'bg-surface': $hc-white,
-            'bg-surface-alt': $hc-white,
-            'bg-element': $hc-white,
-            'bg-element-hover': $hc-yellow,
-            'bg-element-active': $hc-yellow,
-            'bg-neutral': $hc-white,
-            'bg-neutral-hover': $hc-yellow,
-            'bg-neutral-active': $hc-yellow,
-
-            'primary': $hc-black,
-            'primary-hover': $hc-black,
-            'primary-active': $hc-black,
-            'primary-subtle': $hc-white,
-            'on-primary': $hc-white,
-
-            'text-heading': $hc-black,
-            'text-primary': $hc-black,
-            'text-secondary': $hc-black,
-            'text-brand': $hc-black,
-            'text-inverse': $hc-white,
-            'text-info': $hc-cyan,
-            'text-success': $hc-green,
-            'text-warn': $hc-yellow,
-            'text-danger': $hc-red,
-
-            'border-subtle': $hc-black,
-            'border-default': $hc-black,
-            'border-strong': $hc-black,
-            'border-brand': $hc-black,
-            'border-info': $hc-black,
-            'border-success': $hc-black,
-            'border-warn': $hc-black,
-            'border-danger': $hc-black,
-
-            'bg-info': $hc-white,
-            'bg-info-hover': $hc-white,
-            'bg-info-active': $hc-white,
-            'bg-info-disabled': $hc-white,
-            'bg-info-subtle': $hc-white,
-
-            'bg-success': $hc-white,
-            'bg-success-hover': $hc-white,
-            'bg-success-active': $hc-white,
-            'bg-success-disabled': $hc-white,
-            'bg-success-subtle': $hc-white,
-
-            'bg-warn': $hc-white,
-            'bg-warn-hover': $hc-white,
-            'bg-warn-active': $hc-white,
-            'bg-warn-disabled': $hc-white,
-            'bg-warn-subtle': $hc-white,
-
-            'bg-danger': $hc-white,
-            'bg-danger-hover': $hc-white,
-            'bg-danger-active': $hc-white,
-            'bg-danger-disabled': $hc-white,
-            'bg-danger-subtle': $hc-white,
-
-            'scroll-bg': $hc-white,
-            'scroll-thumb': $hc-black,
-            'scroll-thumb-hover': $hc-yellow,
-
-            'meta-brand-palette': 'neutral'), 'high-contrast-light') !default;
-
-$high-contrast-dark-theme: validate-theme(('bg-canvas': $hc-black,
-            'bg-surface': $hc-black,
-            'bg-surface-alt': $hc-black,
-            'bg-element': $hc-black,
-            'bg-element-hover': $hc-yellow,
-            'bg-element-active': $hc-yellow,
-            'bg-neutral': $hc-black,
-            'bg-neutral-hover': $hc-yellow,
-            'bg-neutral-active': $hc-yellow,
-
-            'primary': $hc-white,
-            'primary-hover': $hc-white,
-            'primary-active': $hc-white,
-            'primary-subtle': $hc-black,
-            'on-primary': $hc-black,
-
-            'text-heading': $hc-white,
-            'text-primary': $hc-white,
-            'text-secondary': $hc-white,
-            'text-brand': $hc-white,
-            'text-inverse': $hc-black,
-            'text-info': $hc-cyan,
-            'text-success': $hc-green,
-            'text-warn': $hc-yellow,
-            'text-danger': $hc-red,
-
-            'border-subtle': $hc-white,
-            'border-default': $hc-white,
-            'border-strong': $hc-white,
-            'border-brand': $hc-white,
-            'border-info': $hc-white,
-            'border-success': $hc-white,
-            'border-warn': $hc-white,
-            'border-danger': $hc-white,
-
-            'bg-info': $hc-black,
-            'bg-info-hover': $hc-black,
-            'bg-info-active': $hc-black,
-            'bg-info-disabled': $hc-black,
-            'bg-info-subtle': $hc-black,
-
-            'bg-success': $hc-black,
-            'bg-success-hover': $hc-black,
-            'bg-success-active': $hc-black,
-            'bg-success-disabled': $hc-black,
-            'bg-success-subtle': $hc-black,
-
-            'bg-warn': $hc-black,
-            'bg-warn-hover': $hc-black,
-            'bg-warn-active': $hc-black,
-            'bg-warn-disabled': $hc-black,
-            'bg-warn-subtle': $hc-black,
-
-            'bg-danger': $hc-black,
-            'bg-danger-hover': $hc-black,
-            'bg-danger-active': $hc-black,
-            'bg-danger-disabled': $hc-black,
-            'bg-danger-subtle': $hc-black,
-
-            'scroll-bg': $hc-black,
-            'scroll-thumb': $hc-white,
-            'scroll-thumb-hover': $hc-yellow,
-
-            'meta-brand-palette': 'neutral'), 'high-contrast-dark') !default;
+$high-contrast-light-theme: validate-theme(
+    (
+        'bg-canvas': $hc-white,
+        'bg-surface': $hc-white,
+        'bg-surface-alt': $hc-white,
+        'bg-element': $hc-white,
+        'bg-element-hover': $hc-yellow,
+        'bg-element-active': $hc-yellow,
+        'bg-neutral': $hc-white,
+        'bg-neutral-hover': $hc-yellow,
+        'bg-neutral-active': $hc-yellow,
+
+        'primary': $hc-black,
+        'primary-hover': $hc-black,
+        'primary-active': $hc-black,
+        'primary-subtle': $hc-white,
+        'on-primary': $hc-white,
+
+        'text-heading': $hc-black,
+        'text-primary': $hc-black,
+        'text-secondary': $hc-black,
+        'text-brand': $hc-black,
+        'text-inverse': $hc-white,
+        'text-info': $hc-cyan,
+        'text-success': $hc-green,
+        'text-warn': $hc-yellow,
+        'text-danger': $hc-red,
+
+        'border-subtle': $hc-black,
+        'border-default': $hc-black,
+        'border-strong': $hc-black,
+        'border-brand': $hc-black,
+        'border-info': $hc-black,
+        'border-success': $hc-black,
+        'border-warn': $hc-black,
+        'border-danger': $hc-black,
+
+        'bg-info': $hc-white,
+        'bg-info-hover': $hc-white,
+        'bg-info-active': $hc-white,
+        'bg-info-disabled': $hc-white,
+        'bg-info-subtle': $hc-white,
+
+        'bg-success': $hc-white,
+        'bg-success-hover': $hc-white,
+        'bg-success-active': $hc-white,
+        'bg-success-disabled': $hc-white,
+        'bg-success-subtle': $hc-white,
+
+        'bg-warn': $hc-white,
+        'bg-warn-hover': $hc-white,
+        'bg-warn-active': $hc-white,
+        'bg-warn-disabled': $hc-white,
+        'bg-warn-subtle': $hc-white,
+
+        'bg-danger': $hc-white,
+        'bg-danger-hover': $hc-white,
+        'bg-danger-active': $hc-white,
+        'bg-danger-disabled': $hc-white,
+        'bg-danger-subtle': $hc-white,
+
+        'scroll-bg': $hc-white,
+        'scroll-thumb': $hc-black,
+        'scroll-thumb-hover': $hc-yellow,
+
+        'meta-brand-palette': 'neutral',
+    ),
+    'high-contrast-light'
+) !default;
+$high-contrast-dark-theme: validate-theme(
+    (
+        'bg-canvas': $hc-black,
+        'bg-surface': $hc-black,
+        'bg-surface-alt': $hc-black,
+        'bg-element': $hc-black,
+        'bg-element-hover': $hc-yellow,
+        'bg-element-active': $hc-yellow,
+        'bg-neutral': $hc-black,
+        'bg-neutral-hover': $hc-yellow,
+        'bg-neutral-active': $hc-yellow,
+
+        'primary': $hc-white,
+        'primary-hover': $hc-white,
+        'primary-active': $hc-white,
+        'primary-subtle': $hc-black,
+        'on-primary': $hc-black,
+
+        'text-heading': $hc-white,
+        'text-primary': $hc-white,
+        'text-secondary': $hc-white,
+        'text-brand': $hc-white,
+        'text-inverse': $hc-black,
+        'text-info': $hc-cyan,
+        'text-success': $hc-green,
+        'text-warn': $hc-yellow,
+        'text-danger': $hc-red,
+
+        'border-subtle': $hc-white,
+        'border-default': $hc-white,
+        'border-strong': $hc-white,
+        'border-brand': $hc-white,
+        'border-info': $hc-white,
+        'border-success': $hc-white,
+        'border-warn': $hc-white,
+        'border-danger': $hc-white,
+
+        'bg-info': $hc-black,
+        'bg-info-hover': $hc-black,
+        'bg-info-active': $hc-black,
+        'bg-info-disabled': $hc-black,
+        'bg-info-subtle': $hc-black,
+
+        'bg-success': $hc-black,
+        'bg-success-hover': $hc-black,
+        'bg-success-active': $hc-black,
+        'bg-success-disabled': $hc-black,
+        'bg-success-subtle': $hc-black,
+
+        'bg-warn': $hc-black,
+        'bg-warn-hover': $hc-black,
+        'bg-warn-active': $hc-black,
+        'bg-warn-disabled': $hc-black,
+        'bg-warn-subtle': $hc-black,
+
+        'bg-danger': $hc-black,
+        'bg-danger-hover': $hc-black,
+        'bg-danger-active': $hc-black,
+        'bg-danger-disabled': $hc-black,
+        'bg-danger-subtle': $hc-black,
+
+        'scroll-bg': $hc-black,
+        'scroll-thumb': $hc-white,
+        'scroll-thumb-hover': $hc-yellow,
+
+        'meta-brand-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] {
         --bx-glass-text: var(--bx-text-primary) !important;
         --bx-glass-edge: var(--bx-border-strong) !important;
+
         color: var(--bx-text-primary) !important;
         border-color: var(--bx-border-strong);
     }
-    bx-simple-toast .simple-toast { color: var(--bx-text-primary) !important; }
-    [data-bx-surface], .bx-glass-material {
+
+    bx-simple-toast .simple-toast {
+        color: var(--bx-text-primary) !important;
+    }
+
+    [data-bx-surface],
+    .bx-glass-material {
         background: var(--bx-bg-surface) !important;
-        -webkit-backdrop-filter: none !important;
         backdrop-filter: none !important;
         box-shadow: none !important;
     }
-    .bx-glass-light, .bx-glass-decoration::before, .bx-glass-decoration::after, .bx-glass-material::before {
+
+    .bx-glass-light,
+    .bx-glass-decoration::before,
+    .bx-glass-decoration::after,
+    .bx-glass-material::before {
         display: none !important;
     }
 }

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

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

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

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

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

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

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

@@ -1,22 +1,28 @@
 @use '../theme-engine' as *;
 
-$white-light-theme: make-light-theme('neutral', $overrides: (
-  'primary': #525252,
-  'primary-hover': #404040,
-  'primary-active': #262626,
-  'primary-subtle': rgba(#737373, .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, .12),
-  'on-primary': #171717,
-  'text-brand': #f5f5f5,
-  'border-brand': #d4d4d4,
-  'scroll-thumb': #737373,
-  'scroll-thumb-hover': #a3a3a3
-));
+$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,
+    )
+);

package/effects/README.md

@@ -11,9 +11,7 @@ import { ThemingService } from '@filip.mazev/blocks/core';
 private readonly theme = inject(ThemingService);
 
 this.theme.setAppearance({
-  material: 'glass',  // glass | frosted | solid
-  blur: 10,           // 0–40 pixels
-  tint: 0.4,         // 0–1 opacity
+  glassiness: 0.5,    // 0–1; the midpoint balances clarity and tint
   quality: 'auto',    // auto | baseline | enhanced
   reducedTransparency: false
 });
@@ -38,13 +36,11 @@ import { BxSurfaceDirective } from '@filip.mazev/blocks/effects';
 </section>
 ```
 
-Provide layout and padding using the existing Blocks styling helpers. The directive supplies the material and token-based default border and radius. Controls and actionable surfaces get automatic hover/focus lighting; decorative containers receive nearby light without responding to hover themselves. Components can override the default border and radius with their existing tokens.
+Provide layout and padding using the existing Blocks styling helpers. The directive supplies the material and token-based default border and radius. Controls and actionable surfaces get automatic hover/focus lighting; decorative containers receive nearby light without responding to hover themselves. Containing one input does not turn a panel into an interactive surface. Wrappers inside `bx-form-field` retain field interaction; custom control wrappers outside a field can opt in with `bxSurfaceInteractive`. Components can override the default border and radius with their existing tokens.
 
 | Input | Default | Local override |
 | --- | --- | --- |
-| `bxSurface` | Global material | `glass`, `frosted`, `solid` |
-| `bxSurfaceBlur` | Global blur | 0–40 pixels |
-| `bxSurfaceTint` | Global tint | 0–1 |
+| `bxSurfaceGlassiness` | Global glassiness | 0–1 |
 | `bxSurfaceInteractive` | Automatic control/action detection | Boolean; explicitly enables or disables interaction lighting and press deformation |
 | `bxSurfaceEmission` | Theme accent (error color in invalid fields) | Override the semantic color emitted on hover, press or an active state |
 | `bxSurfaceFocusEmission` | Surface emission color | Override the color emitted while a contained or associated native control has focus |
@@ -54,9 +50,9 @@ Omit local inputs to keep the surface connected to application settings. A delib
 
 ## Composition and motion
 
-Use a single backing per physical surface. For example, a menu owns the backing while menu-item content shares it; a form-field label does not need an extra blurred card. Apply `bxTransition="fade"` on a dropdown to fade its menu without resizing its contents. Animated overlays keep a solid theme-colored backing throughout their lifetime, avoiding a blur/tint pop at the end of motion. Other surfaces remain translucent.
+Use a single backing per physical surface. For example, a menu owns the backing while menu-item content shares it; a form-field label does not need an extra blurred card. Apply `bxTransition="fade"` on a dropdown to fade its menu without resizing its contents. The fade runs on the material itself, preserving the configured translucency and blur throughout the animation.
 
-Buttons, links, native field surfaces and elements with actionable ARIA roles automatically illuminate their border and nearby surfaces on hover or focus. Active ARIA states keep the light enabled. Plain panels, sections and other decorative containers remain passive receivers. Give a custom clickable element its appropriate role (such as `role="button"`), or explicitly enable `bxSurfaceInteractive` for a custom interaction. Use `bxSurfaceEmission` only to override the semantic color. The source is the element’s geometry, never the mouse coordinates.
+Buttons, links, native field surfaces and elements with actionable ARIA roles automatically illuminate their border and nearby surfaces on hover or focus. Active ARIA states keep the light enabled. Plain panels, sections and other decorative containers remain passive receivers, while their edges pick up subtle color from nearby foreground and background content. The runtime samples CSS backgrounds and local pixels from visible images, video and canvas, then uses paint order, depth and distance to shape the edge tint. Give a custom clickable element its appropriate role (such as `role="button"`), or explicitly enable `bxSurfaceInteractive` for a custom interaction. Use `bxSurfaceEmission` only to override the semantic color. The source is the element’s geometry, never the mouse coordinates.
 
 There is no drag-to-reposition interaction in this iteration. Spatial highlights are a lightweight lighting approximation, while backdrop blur uses browser compositing. These effects do not ray-trace arbitrary DOM content. Rendering quality can add supported enhancements, and baseline/solid modes remain available for constrained devices.