@filip.mazev/blocks 1.4.3 → 1.4.5

package/README.md

@@ -49,7 +49,7 @@ Then, manually configure your styles.scss:
 
 ## Appearance
 
-Version 1.4.0 integrates glass throughout Blocks using its existing semantic theme. Configure it application-wide through `ThemingService.setAppearance({ material: 'glass', blur: 10, tint: 0.4 })`; use `resetAppearance()` for defaults. Existing controls receive their material automatically, including menus, dialogs and notifications.
+Version 1.4.0 integrates glass throughout Blocks using its existing semantic theme. Configure it application-wide through `ThemingService.setAppearance({ glassiness: 0.5 })`; use `resetAppearance()` for defaults. Existing controls receive their material automatically, including menus, dialogs and notifications.
 
 Load `@filip.mazev/blocks/effects/effects.css` once globally alongside the Blocks Sass theme. `ng add` registers the stylesheet for new installations. `BxSurfaceDirective` from `@filip.mazev/blocks/effects` is available for custom containers and local overrides. The framework-independent engine is `@filip.mazev/blocks/effects/runtime`, included in the same package.
 

package/_index.scss

@@ -1 +1 @@
-@forward './core/styles/index';
+@forward './core/styles/index';

package/core/styles/_field-state.scss

@@ -3,25 +3,37 @@
 // Shared by native projected fields and Blocks input, search and select controls.
 @mixin glass-field {
     --bx-glass-surface: var(--bx-bg-neutral);
-    --bx-glass-min-opacity: .45;
+    --bx-glass-min-opacity: 0.45;
     --bx-glass-edge: var(--bx-border-default);
     --bx-glass-shadow: none;
+
     border: 1px solid var(--bx-glass-edge);
     border-radius: radius(lg);
-    &::after { display: none; }
-    &:focus-within:not(.is-disabled):not(:disabled), &:focus-visible:not(:disabled), &.is-open:not(:disabled) {
+
+    &::after {
+        display: none;
+    }
+
+    &:focus-within:not(.is-disabled, :disabled),
+    &:focus-visible:not(:disabled),
+    &.is-open:not(:disabled) {
         --bx-glass-edge: var(--bx-border-brand);
+
         outline: 2px solid var(--bx-border-brand);
         outline-offset: -2px;
+
         --bx-glass-shadow: none;
     }
 }
 
 @mixin invalid-glass-field {
     --bx-glass-surface: var(--bx-bg-neutral);
-    --bx-glass-min-opacity: .45;
+    --bx-glass-min-opacity: 0.45;
     --bx-glass-edge: color-mix(in srgb, var(--bx-text-danger) 40%, var(--bx-border-default));
+
     border-block-end-color: var(--bx-glass-edge);
+
     --bx-glass-shadow: 0 8px 18px -10px color-mix(in srgb, var(--bx-text-danger) 65%, transparent);
+
     outline-color: var(--bx-border-danger);
 }

package/core/styles/_index.scss

@@ -4,7 +4,6 @@
 @forward 'palettes';
 @forward 'theme-engine';
 @forward 'a11y';
-
 @forward 'themes/white-theme';
 @forward 'themes/purple-theme';
 @forward 'themes/orange-theme';

package/core/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 @use 'variables' as *;
 
 @mixin respond-up($size) {
@@ -33,4 +33,4 @@
 
 @function z($key) {
     @return map.get($z-index, $key);
-}
+}

package/core/styles/_motion.scss

@@ -3,4 +3,4 @@
     transition-property: #{$property};
     transition-duration: calc(#{$duration} * (1 - var(--bx-reduced-motion, 0)));
     transition-timing-function: #{$easing};
-}
+}

package/core/styles/_palettes.scss

@@ -1,155 +1,154 @@
 @use 'sass:map';
 
 $orange-palette: (
-    50: #FFF7ED,
-    100: #FFEDD4,
-    200: #FFD6A7,
-    300: #FFB86A,
-    400: #FF8904,
-    500: #FF6900,
-    600: #F54900,
-    700: #CA3500,
-    800: #9F2D00,
+    50: #fff7ed,
+    100: #ffedd4,
+    200: #ffd6a7,
+    300: #ffb86a,
+    400: #ff8904,
+    500: #ff6900,
+    600: #f54900,
+    700: #ca3500,
+    800: #9f2d00,
     900: #551111,
-    1000: #441306) !default;
-
+    1000: #441306,
+) !default;
 $purple-palette: (
-    50: #F4EBFF,
-    100: #E6D4FF,
-    200: #CFA3FF,
-    300: #B36BFF,
-    400: #922FFF,
-    500: #6D00FF,
-    600: #5700CC,
+    50: #f4ebff,
+    100: #e6d4ff,
+    200: #cfa3ff,
+    300: #b36bff,
+    400: #922fff,
+    500: #6d00ff,
+    600: #5700cc,
     700: #410099,
-    800: #2C0066,
+    800: #2c0066,
     900: #160033,
-    1000: #0B001A) !default;
-
+    1000: #0b001a,
+) !default;
 $red-palette: (
-    50: #FDF1F0,
-    100: #FADCDA,
-    200: #F5B0AB,
-    300: #EF8079,
-    400: #EA4C43,
-    500: #E3241B,
-    600: #BE1810,
+    50: #fdf1f0,
+    100: #fadcda,
+    200: #f5b0ab,
+    300: #ef8079,
+    400: #ea4c43,
+    500: #e3241b,
+    600: #be1810,
     700: #991009,
     800: #750904,
     900: #520401,
-    1000: #2E0200) !default;
-
+    1000: #2e0200,
+) !default;
 $green-palette: (
-    50: #F7FCE8,
-    100: #EDF8C8,
-    200: #DDF19C,
-    300: #CAE96A,
-    400: #BEE046,
-    500: #B0D624,
-    600: #92B518,
-    700: #718F10,
-    800: #556D0C,
-    900: #3C4E08,
-    1000: #212C03) !default;
-
+    50: #f7fce8,
+    100: #edf8c8,
+    200: #ddf19c,
+    300: #cae96a,
+    400: #bee046,
+    500: #b0d624,
+    600: #92b518,
+    700: #718f10,
+    800: #556d0c,
+    900: #3c4e08,
+    1000: #212c03,
+) !default;
 $danger-palette: (
-    50: #FFFCFC,
-    100: #F4E5E5,
-    200: #EAD0D0,
-    300: #DE9E9E,
-    400: #F76D6D,
-    500: #D94D4D,
-    600: #C93D3D,
-    700: #BA2E2E,
+    50: #fffcfc,
+    100: #f4e5e5,
+    200: #ead0d0,
+    300: #de9e9e,
+    400: #f76d6d,
+    500: #d94d4d,
+    600: #c93d3d,
+    700: #ba2e2e,
     800: #722222,
-    900: #2B1717,
-    1000: #0E0C0C) !default;
-
+    900: #2b1717,
+    1000: #0e0c0c,
+) !default;
 $warn-palette: (
-    50: #FFFEFB,
-    100: #F7F0E3,
-    200: #EAE3D0,
-    300: #E7C892,
-    400: #E4AD55,
-    500: #C68D36,
-    600: #B77D27,
-    700: #A96D18,
-    800: #6A4817,
-    900: #2B2317,
-    1000: #0E0D0C) !default;
-
+    50: #fffefb,
+    100: #f7f0e3,
+    200: #eae3d0,
+    300: #e7c892,
+    400: #e4ad55,
+    500: #c68d36,
+    600: #b77d27,
+    700: #a96d18,
+    800: #6a4817,
+    900: #2b2317,
+    1000: #0e0d0c,
+) !default;
 $success-palette: (
-    50: #FCFFFC,
-    100: #E6F4E6,
-    200: #D1EAD0,
-    300: #98D6A0,
-    400: #5FC370,
-    500: #3FA94E,
-    600: #2E9C3E,
-    700: #1E8F2D,
-    800: #1A5D22,
-    900: #172B18,
-    1000: #0C0E0C) !default;
-
+    50: #fcfffc,
+    100: #e6f4e6,
+    200: #d1ead0,
+    300: #98d6a0,
+    400: #5fc370,
+    500: #3fa94e,
+    600: #2e9c3e,
+    700: #1e8f2d,
+    800: #1a5d22,
+    900: #172b18,
+    1000: #0c0e0c,
+) !default;
 $information-palette: (
-    50: #FBFDFF,
-    100: #E5EEF7,
-    200: #D0DDEA,
-    300: #97CACE,
-    400: #5FB7C3,
-    500: #3E90B5,
-    600: #2E7CAE,
-    700: #1E69A7,
-    800: #1A4469,
-    900: #17202B,
-    1000: #0C0D0E) !default;
-
+    50: #fbfdff,
+    100: #e5eef7,
+    200: #d0ddea,
+    300: #97cace,
+    400: #5fb7c3,
+    500: #3e90b5,
+    600: #2e7cae,
+    700: #1e69a7,
+    800: #1a4469,
+    900: #17202b,
+    1000: #0c0d0e,
+) !default;
 $neutral-palette: (
-    50: #FAFAFA,
-    100: #F5F5F5,
-    200: #E5E5E5,
-    300: #D4D4D4,
-    400: #A1A1A1,
+    50: #fafafa,
+    100: #f5f5f5,
+    200: #e5e5e5,
+    300: #d4d4d4,
+    400: #a1a1a1,
     500: #737373,
     600: #525252,
     700: #404040,
     800: #262626,
     900: #171717,
-    1000: #0b0b0b) !default;
-
+    1000: #0b0b0b,
+) !default;
 $cyber-yellow-palette: (
-    50: #FFFEF2,
-    100: #FFFDD1,
-    200: #FFF9A3,
-    300: #FFF370,
-    400: #FFEB33,
+    50: #fffef2,
+    100: #fffdd1,
+    200: #fff9a3,
+    300: #fff370,
+    400: #ffeb33,
     500: #e6da00,
-    600: #CCBD00,
-    700: #998E00,
-    800: #665E00,
-    900: #332F00,
-    1000: #141300) !default;
-
+    600: #ccbd00,
+    700: #998e00,
+    800: #665e00,
+    900: #332f00,
+    1000: #141300,
+) !default;
 $cyber-slate-palette: (
-    50: #EBEFF2,
-    100: #CDD6DF,
-    200: #A8B8C6,
-    300: #7E96A9,
-    400: #5D788C,
-    500: #3E5669,
-    600: #283C4C,
-    700: #1B2936,
-    800: #121A21,
-    900: #0B1015,
-    1000: #05080A) !default;
-
+    50: #ebeff2,
+    100: #cdd6df,
+    200: #a8b8c6,
+    300: #7e96a9,
+    400: #5d788c,
+    500: #3e5669,
+    600: #283c4c,
+    700: #1b2936,
+    800: #121a21,
+    900: #0b1015,
+    1000: #05080a,
+) !default;
 $hc-black: #000000;
 $hc-white: #ffffff;
 $hc-yellow: #e4d500;
 $hc-cyan: #00f3f3;
 $hc-red: #ff0000;
 $hc-green: #00ff00;
-
 $all-palettes: (
     'orange': $orange-palette,
     'purple': $purple-palette,
@@ -162,17 +161,15 @@ $all-palettes: (
     'neutral': $neutral-palette,
 
     'cyber-yellow': $cyber-yellow-palette,
-    'cyber-slate': $cyber-slate-palette) !default;
+    'cyber-slate': $cyber-slate-palette,
+) !default;
 
 @function get-palette($name) {
     @if map.has-key($all-palettes, $name) {
-        @return map.get($all-palettes, $name
-    );
-}
-
-@else {
-    @error "The palette '#{$name}' does not exist in @filip.mazev/blocks/core/styles/index.";
-}
+        @return map.get($all-palettes, $name);
+    } @else {
+        @error "The palette '#{$name}' does not exist in @filip.mazev/blocks/core/styles/index.";
+    }
 }
 
 @function get-color-from-palette($palette-name, $shade) {
@@ -180,9 +177,7 @@ $all-palettes: (
 
     @if map.has-key($palette, $shade) {
         @return map.get($palette, $shade);
-    }
-
-    @else {
+    } @else {
         @error "Shade '#{$shade}' not found in palette '#{$palette-name}'.";
     }
-}
+}

package/core/styles/_slider.scss

@@ -7,9 +7,14 @@
     height: spacing(2);
     border: 1px solid var(--bx-border-strong);
     border-radius: radius(pill);
-    background: linear-gradient(to right, var(--bx-primary) 0 var(--bx-slider-progress, 50%), var(--bx-bg-neutral) var(--bx-slider-progress, 50%) 100%);
-    box-shadow: inset 0 1px 2px rgb(0 0 0 / .16);
+    background: linear-gradient(
+        to right,
+        var(--bx-primary) 0 var(--bx-slider-progress, 50%),
+        var(--bx-bg-neutral) var(--bx-slider-progress, 50%) 100%
+    );
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
 }
+
 @mixin thumb {
     appearance: none;
     box-sizing: border-box;
@@ -18,48 +23,86 @@
     border-radius: radius(pill);
     border: 1px solid var(--bx-border-strong);
     background: var(--bx-bg-surface);
-    background: radial-gradient(circle at 35% 0%, rgb(255 255 255 / .24), transparent 65%), var(--bx-bg-surface);
-    border-color: color-mix(in srgb, var(--bx-slider-light-color, var(--bx-primary)) calc(var(--bx-slider-light-strength, .18) * 100%), var(--bx-border-strong));
-    -webkit-backdrop-filter: none;
+    background:
+        radial-gradient(circle at 35% 0%, rgb(255 255 255 / 24%), transparent 65%),
+        var(--bx-bg-surface);
+    border-color: color-mix(
+        in srgb,
+        var(--bx-slider-light-color, var(--bx-primary))
+            calc(var(--bx-slider-light-strength, 0.18) * 100%),
+        var(--bx-border-strong)
+    );
     backdrop-filter: none;
-    box-shadow: inset 0 1px 1px rgb(255 255 255 / .45), inset 0 -1px 2px color-mix(in srgb, var(--bx-slider-light-color, var(--bx-primary)) 30%, transparent), 0 2px 5px rgb(0 0 0 / .18);
+    box-shadow:
+        inset 0 1px 1px rgb(255 255 255 / 45%),
+        inset 0 -1px 2px
+            color-mix(in srgb, var(--bx-slider-light-color, var(--bx-primary)) 30%, transparent),
+        0 2px 5px rgb(0 0 0 / 18%);
 }
+
 .bx-slider-shell {
     display: block;
     position: relative;
     width: 100%;
     min-width: 0;
-    input.bx-slider { display: block; }
+
+    input.bx-slider {
+        display: block;
+    }
+
     // The native thumb remains the hit target; the opaque decorative thumb reflects nearby colors.
-    input.bx-slider::-webkit-slider-thumb { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
-    input.bx-slider::-moz-range-thumb { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
-    &.is-disabled .bx-slider-thumb { opacity: .5; }
+    input.bx-slider::-webkit-slider-thumb {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        backdrop-filter: none;
+    }
+
+    input.bx-slider::-moz-range-thumb {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        backdrop-filter: none;
+    }
 }
+
 .bx-slider-thumb {
     @include thumb;
-    @include bx-transition('border-color, box-shadow', .2s, ease-out);
+    @include bx-transition('border-color, box-shadow', 0.2s, ease-out);
+
     position: absolute;
     top: var(--bx-slider-center-y, 50%);
-    left: calc(var(--bx-slider-track-start, 0px) + var(--bx-slider-position, .5) * (var(--bx-slider-track-width, 100%) - #{spacing(6)}));
+    left: calc(
+        var(--bx-slider-track-start, 0px) + var(--bx-slider-position, 0.5) *
+            (var(--bx-slider-track-width, 100%) - #{spacing(6)})
+    );
     transform: translateY(-50%);
     pointer-events: none;
+
     &::after {
-        @include bx-transition(opacity, .2s, ease-out);
+        @include bx-transition(opacity, 0.2s, ease-out);
+
         content: '';
         position: absolute;
         inset: -1px;
         box-sizing: border-box;
         border-radius: inherit;
         padding: 1px;
-        background: radial-gradient(circle at var(--bx-slider-light-x, 35%) var(--bx-slider-light-y, 0%), var(--bx-slider-light-color, var(--bx-primary)), transparent 75%);
-        opacity: var(--bx-slider-light-strength, .25);
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        background: radial-gradient(
+            circle at var(--bx-slider-light-x, 35%) var(--bx-slider-light-y, 0%),
+            var(--bx-slider-light-color, var(--bx-primary)),
+            transparent 75%
+        );
+        opacity: var(--bx-slider-light-strength, 0.25);
+        mask:
+            linear-gradient(#ffffff 0 0) content-box,
+            linear-gradient(#ffffff 0 0);
         mask-composite: exclude;
     }
 }
+
 input.bx-slider {
     appearance: none;
-    -webkit-appearance: none;
     width: 100%;
     height: spacing(10);
     margin: 0;
@@ -67,35 +110,110 @@ input.bx-slider {
     border: 0;
     background: transparent;
     cursor: pointer;
-    &:dir(rtl) { direction: ltr; transform: scaleX(-1); }
-    &::-webkit-slider-runnable-track { @include track; }
-    &::-moz-range-track { @include track; }
-    &::-webkit-slider-thumb { @include thumb; margin-top: calc((#{spacing(2)} - #{spacing(6)}) / 2 - 1px); }
-    &::-moz-range-thumb { @include thumb; }
-    &:focus-visible { outline: 2px solid var(--bx-border-brand); outline-offset: 3px; border-radius: radius(pill); }
-    &:disabled { opacity: .5; cursor: not-allowed; }
+
+    &:dir(rtl) {
+        direction: ltr;
+        transform: scaleX(-1);
+    }
+
+    &::-webkit-slider-runnable-track {
+        @include track;
+    }
+
+    &::-moz-range-track {
+        @include track;
+    }
+
+    &::-webkit-slider-thumb {
+        @include thumb;
+
+        margin-top: calc((#{spacing(2)} - #{spacing(6)}) / 2 - 1px);
+    }
+
+    &::-moz-range-thumb {
+        @include thumb;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--bx-border-brand);
+        outline-offset: 3px;
+        border-radius: radius(pill);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+@mixin opaque-thumb {
+    background: var(--bx-bg-surface);
+    backdrop-filter: none;
+}
+
+[data-bx-reduced-transparency='true'] .bx-slider-thumb {
+    @include opaque-thumb;
 }
-@mixin opaque-thumb { background: var(--bx-bg-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
-[data-bx-glass-material='solid'] .bx-slider-thumb,
-[data-bx-reduced-transparency='true'] .bx-slider-thumb { @include opaque-thumb; }
-[data-bx-glass-material='solid'] input.bx-slider,
+
 [data-bx-reduced-transparency='true'] input.bx-slider {
-    &::-webkit-slider-thumb { @include opaque-thumb; }
-    &::-moz-range-thumb { @include opaque-thumb; }
+    &::-webkit-slider-thumb {
+        @include opaque-thumb;
+    }
+
+    &::-moz-range-thumb {
+        @include opaque-thumb;
+    }
 }
+
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    .bx-slider-thumb { @include opaque-thumb; }
-    input.bx-slider::-webkit-slider-thumb { @include opaque-thumb; }
-    input.bx-slider::-moz-range-thumb { @include opaque-thumb; }
+    .bx-slider-thumb {
+        @include opaque-thumb;
+    }
+
+    input.bx-slider::-webkit-slider-thumb {
+        @include opaque-thumb;
+    }
+
+    input.bx-slider::-moz-range-thumb {
+        @include opaque-thumb;
+    }
 }
+
 @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-    .bx-slider-thumb { @include opaque-thumb; }
-    input.bx-slider::-webkit-slider-thumb { @include opaque-thumb; }
-    input.bx-slider::-moz-range-thumb { @include opaque-thumb; }
+    .bx-slider-thumb {
+        @include opaque-thumb;
+    }
+
+    input.bx-slider::-webkit-slider-thumb {
+        @include opaque-thumb;
+    }
+
+    input.bx-slider::-moz-range-thumb {
+        @include opaque-thumb;
+    }
 }
+
 @media (forced-colors: active) {
-    .bx-slider-thumb { display: none; }
-    input.bx-slider { appearance: auto; -webkit-appearance: auto; accent-color: Highlight; }
-    input.bx-slider::-webkit-slider-thumb, .bx-slider-shell input.bx-slider::-webkit-slider-thumb { background: ButtonText; border-color: ButtonText; box-shadow: none; }
-    input.bx-slider::-moz-range-thumb, .bx-slider-shell input.bx-slider::-moz-range-thumb { background: ButtonText; border-color: ButtonText; box-shadow: none; }
+    .bx-slider-thumb {
+        display: none;
+    }
+
+    input.bx-slider {
+        appearance: auto;
+        accent-color: Highlight;
+    }
+
+    input.bx-slider::-webkit-slider-thumb,
+    .bx-slider-shell input.bx-slider::-webkit-slider-thumb {
+        background: ButtonText;
+        border-color: ButtonText;
+        box-shadow: none;
+    }
+
+    input.bx-slider::-moz-range-thumb,
+    .bx-slider-shell input.bx-slider::-moz-range-thumb {
+        background: ButtonText;
+        border-color: ButtonText;
+        box-shadow: none;
+    }
 }