@filip.mazev/blocks 1.4.3 → 1.4.4

package/core/styles/_theme-engine.scss

@@ -13,13 +13,11 @@ $required-theme-keys: (
     'bg-neutral',
     'bg-neutral-hover',
     'bg-neutral-active',
-
     'primary',
     'primary-hover',
     'primary-active',
     'primary-subtle',
     'on-primary',
-
     'text-heading',
     'text-primary',
     'text-secondary',
@@ -29,7 +27,6 @@ $required-theme-keys: (
     'text-warn',
     'text-success',
     'text-danger',
-
     'border-subtle',
     'border-default',
     'border-strong',
@@ -38,35 +35,29 @@ $required-theme-keys: (
     'border-success',
     'border-warn',
     'border-danger',
-
     'bg-info',
     'bg-info-hover',
     'bg-info-active',
     'bg-info-disabled',
     'bg-info-subtle',
-
     'bg-success',
     'bg-success-hover',
     'bg-success-active',
     'bg-success-disabled',
     'bg-success-subtle',
-
     'bg-warn',
     'bg-warn-hover',
     'bg-warn-active',
     'bg-warn-disabled',
     'bg-warn-subtle',
-
     'bg-danger',
     'bg-danger-hover',
     'bg-danger-active',
     'bg-danger-disabled',
     'bg-danger-subtle',
-
     'scroll-bg',
     'scroll-thumb',
     'scroll-thumb-hover',
-
     'meta-brand-palette'
 );
 
@@ -78,7 +69,7 @@ $required-theme-keys: (
     }
 
     @each $key, $value in $theme {
-        @if string.index($key, 'meta-') !=1 {
+        @if string.index($key, 'meta-') != 1 {
             @if not list.index($required-theme-keys, $key) {
                 @error "Strict Theme Error: '#{$theme-name}' contains an invalid key '#{$key}'. Remove or rename it.";
             }
@@ -99,13 +90,11 @@ $required-theme-keys: (
         'bg-neutral': get-color-from-palette('neutral', 100),
         'bg-neutral-hover': get-color-from-palette('neutral', 50),
         'bg-neutral-active': get-color-from-palette('neutral', 200),
-
         'primary': get-color-from-palette($accent, 500),
         'primary-hover': get-color-from-palette($accent, 600),
         'primary-active': get-color-from-palette($accent, 700),
         'primary-subtle': rgba(get-color-from-palette($accent, 300), 0.6),
         'on-primary': get-color-from-palette('neutral', 100),
-
         'text-heading': get-color-from-palette('neutral', 900),
         'text-primary': get-color-from-palette('neutral', 700),
         'text-secondary': get-color-from-palette('neutral', 500),
@@ -115,7 +104,6 @@ $required-theme-keys: (
         'text-warn': get-color-from-palette('warn', 700),
         'text-success': get-color-from-palette('success', 700),
         'text-danger': get-color-from-palette('danger', 700),
-
         'border-subtle': get-color-from-palette('neutral', 200),
         'border-default': get-color-from-palette('neutral', 300),
         'border-strong': get-color-from-palette('neutral', 400),
@@ -124,41 +112,42 @@ $required-theme-keys: (
         'border-success': get-color-from-palette('success', 400),
         'border-warn': get-color-from-palette('warn', 400),
         'border-danger': get-color-from-palette('danger', 400),
-
         'bg-info': get-color-from-palette('information', 100),
         'bg-info-hover': get-color-from-palette('information', 200),
         'bg-info-active': get-color-from-palette('information', 300),
         'bg-info-disabled': get-color-from-palette('information', 50),
-        'bg-info-subtle': rgba(get-color-from-palette('information', 50), 0.95),
-
+        'bg-info-subtle': rgb(get-color-from-palette('information', 50), 0.95),
         'bg-success': get-color-from-palette('success', 100),
         'bg-success-hover': get-color-from-palette('success', 200),
         'bg-success-active': get-color-from-palette('success', 300),
         'bg-success-disabled': get-color-from-palette('success', 50),
-        'bg-success-subtle': rgba(get-color-from-palette('success', 50), 0.95),
-
+        'bg-success-subtle': rgb(get-color-from-palette('success', 50), 0.95),
         'bg-warn': get-color-from-palette('warn', 100),
         'bg-warn-hover': get-color-from-palette('warn', 200),
         'bg-warn-active': get-color-from-palette('warn', 300),
         'bg-warn-disabled': get-color-from-palette('warn', 50),
-        'bg-warn-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
-
+        'bg-warn-subtle': rgb(get-color-from-palette('warn', 50), 0.95),
         'bg-danger': get-color-from-palette('danger', 100),
         'bg-danger-hover': get-color-from-palette('danger', 200),
         'bg-danger-active': get-color-from-palette('danger', 300),
         'bg-danger-disabled': get-color-from-palette('danger', 50),
-        'bg-danger-subtle': rgba(get-color-from-palette('danger', 50), 0.95),
-
+        'bg-danger-subtle': rgb(get-color-from-palette('danger', 50), 0.95),
         'scroll-bg': get-color-from-palette($surface-brand, 100),
-        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($accent, 300) -10.44%, get-color-from-palette($accent, 400) 100%),
-        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($accent, 400) -10.44%, get-color-from-palette($accent, 700) 100%),
-
-        'meta-brand-palette': $accent
+        'scroll-thumb': linear-gradient(
+                278deg,
+                get-color-from-palette($accent, 300) -10.44%,
+                get-color-from-palette($accent, 400) 100%
+            ),
+        'scroll-thumb-hover': linear-gradient(
+                278deg,
+                get-color-from-palette($accent, 400) -10.44%,
+                get-color-from-palette($accent, 700) 100%
+            ),
+        'meta-brand-palette': $accent,
     );
+    $merged-theme: map.merge($base, $overrides);
 
-$merged-theme: map.merge($base, $overrides);
-
-@return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-light');
+    @return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-light');
 }
 
 @function make-dark-theme($surface-brand, $accent: $surface-brand, $overrides: ()) {
@@ -172,7 +161,6 @@ $merged-theme: map.merge($base, $overrides);
         'bg-neutral': get-color-from-palette('neutral', 900),
         'bg-neutral-hover': get-color-from-palette('neutral', 800),
         'bg-neutral-active': get-color-from-palette('neutral', 600),
-
         'primary': get-color-from-palette($accent, 500),
         'primary-hover': get-color-from-palette($accent, 400),
         'primary-active': get-color-from-palette($accent, 300),
@@ -188,7 +176,6 @@ $merged-theme: map.merge($base, $overrides);
         'text-success': get-color-from-palette('success', 400),
         'text-warn': get-color-from-palette('warn', 400),
         'text-danger': get-color-from-palette('danger', 400),
-
         'border-subtle': get-color-from-palette('neutral', 900),
         'border-default': get-color-from-palette('neutral', 800),
         'border-strong': get-color-from-palette('neutral', 700),
@@ -197,41 +184,42 @@ $merged-theme: map.merge($base, $overrides);
         'border-success': get-color-from-palette('success', 400),
         'border-warn': get-color-from-palette('warn', 400),
         'border-danger': get-color-from-palette('danger', 400),
-
         'bg-info': get-color-from-palette('information', 900),
         'bg-info-hover': get-color-from-palette('information', 800),
         'bg-info-active': get-color-from-palette('information', 700),
         'bg-info-disabled': get-color-from-palette('information', 1000),
-        'bg-info-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
-
+        'bg-info-subtle': rgb(get-color-from-palette('information', 1000), 0.95),
         'bg-success': get-color-from-palette('success', 900),
         'bg-success-hover': get-color-from-palette('success', 800),
         'bg-success-active': get-color-from-palette('success', 700),
         'bg-success-disabled': get-color-from-palette('success', 1000),
-        'bg-success-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
-
+        'bg-success-subtle': rgb(get-color-from-palette('success', 1000), 0.95),
         'bg-warn': get-color-from-palette('warn', 900),
         'bg-warn-hover': get-color-from-palette('warn', 800),
         'bg-warn-active': get-color-from-palette('warn', 700),
         'bg-warn-disabled': get-color-from-palette('warn', 1000),
-        'bg-warn-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
-
+        'bg-warn-subtle': rgb(get-color-from-palette('warn', 1000), 0.95),
         'bg-danger': get-color-from-palette('danger', 900),
         'bg-danger-hover': get-color-from-palette('danger', 800),
         'bg-danger-active': get-color-from-palette('danger', 700),
         'bg-danger-disabled': get-color-from-palette('danger', 1000),
-        'bg-danger-subtle': rgba(get-color-from-palette('danger', 1000), 0.95),
-
+        'bg-danger-subtle': rgb(get-color-from-palette('danger', 1000), 0.95),
         'scroll-bg': get-color-from-palette($surface-brand, 900),
-        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($accent, 700) -10.44%, get-color-from-palette($accent, 500) 100%),
-        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($accent, 500) -10.44%, get-color-from-palette($accent, 400) 100%),
-
-        'meta-brand-palette': $accent
+        'scroll-thumb': linear-gradient(
+                278deg,
+                get-color-from-palette($accent, 700) -10.44%,
+                get-color-from-palette($accent, 500) 100%
+            ),
+        'scroll-thumb-hover': linear-gradient(
+                278deg,
+                get-color-from-palette($accent, 500) -10.44%,
+                get-color-from-palette($accent, 400) 100%
+            ),
+        'meta-brand-palette': $accent,
     );
+    $merged-theme: map.merge($base, $overrides);
 
-$merged-theme: map.merge($base, $overrides);
-
-@return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-dark');
+    @return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-dark');
 }
 
 @mixin bx-theme($config) {
@@ -240,12 +228,13 @@ $merged-theme: map.merge($base, $overrides);
     --bx-glass-text: var(--bx-text-primary);
     --bx-glass-edge: var(--bx-border-default);
     --bx-glass-accent: var(--bx-primary);
+
     @each $key, $value in $config {
-        @if $key !='meta-brand-palette' {
+        @if $key != 'meta-brand-palette' {
             --bx-#{$key}: #{$value};
         }
 
-        @if $key =='meta-brand-palette' {
+        @if $key == 'meta-brand-palette' {
             $brand-palette: get-palette($value);
 
             @each $shade, $color in $brand-palette {
@@ -256,31 +245,22 @@ $merged-theme: map.merge($base, $overrides);
 }
 
 @each $key in $required-theme-keys {
-
-    @if string.index($key, 'bg-')==1 {
+    @if string.index($key, 'bg-') == 1 {
         .bx-#{$key} {
             background-color: var(--bx-#{$key});
             transition: background-color 0.2s ease-in-out;
         }
-    }
-
-    @else if string.index($key, 'text-')==1 {
+    } @else if string.index($key, 'text-') == 1 {
         .bx-#{$key} {
             color: var(--bx-#{$key});
             transition: color 0.2s ease-in-out;
         }
-    }
-
-    @else if string.index($key, 'border-')==1 {
+    } @else if string.index($key, 'border-') == 1 {
         .bx-#{$key} {
             border-color: var(--bx-#{$key});
             transition: border-color 0.2s ease-in-out;
         }
-    }
-
-    @else if string.index($key, 'scroll-')==1 {}
-
-    @else {
+    } @else if not string.index($key, 'scroll-') {
         .bx-bg-#{$key} {
             background-color: var(--bx-#{$key});
             transition: background-color 0.2s ease-in-out;
@@ -296,4 +276,4 @@ $merged-theme: map.merge($base, $overrides);
             transition: border-color 0.2s ease-in-out;
         }
     }
-}
+}

package/core/styles/_utilities.scss

@@ -3,7 +3,6 @@
 @use 'variables' as *;
 @use 'palettes' as *;
 
-
 @each $key, $val in $spacing {
     .bx-p-#{$key} {
         padding: #{$val};
@@ -105,7 +104,7 @@
 }
 
 @each $palette-name, $shades in $all-palettes {
-    @if meta.type-of($shades)=='map' {
+    @if meta.type-of($shades) == 'map' {
         @each $shade, $color in $shades {
             .bx-bg-#{$palette-name}-#{$shade} {
                 background-color: var(--bx-color-#{$palette-name}-#{$shade});
@@ -140,7 +139,7 @@
     }
 
     @each $palette-name, $shades in $all-palettes {
-        @if meta.type-of($shades)=='map' {
+        @if meta.type-of($shades) == 'map' {
             @each $shade, $color in $shades {
                 --bx-color-#{$palette-name}-#{$shade}: #{$color};
             }
@@ -154,4 +153,4 @@
     .bx-icon-pos-end {
         margin-left: 0.5rem;
     }
-}
+}

package/core/styles/_validation.scss

@@ -1,16 +1,21 @@
 @use 'field-state' as *;
+
 // A projected surface inside a form field receives the complete field material,
 // including its valid focus state, without application-specific effects CSS.
 .bx-field-control > :where([data-bx-surface]:not(button[bx-button], a[bx-button], bx-button)) {
     @include glass-field;
 }
+
 // Projected native controls receive the same error treatment as Blocks controls.
 .bx-field-wrapper.is-invalid > .bx-field-control > [data-bx-surface] {
     @include invalid-glass-field;
 }
+
 @media (forced-colors: active) {
-    .bx-field-wrapper.is-invalid > .bx-field-control > [data-bx-surface], [data-bx-surface].is-invalid {
+    .bx-field-wrapper.is-invalid > .bx-field-control > [data-bx-surface],
+    [data-bx-surface].is-invalid {
         --bx-glass-shadow: none;
+
         border-color: Mark;
         outline-color: Mark;
     }

package/core/styles/_variables.scss

@@ -11,8 +11,7 @@ $spacing: (
     8: 2rem,
     10: 2.5rem,
     12: 3rem,
-    ) !default;
-
+) !default;
 $radiuses: (
     none: 0,
     sm: 0.25rem,
@@ -22,16 +21,27 @@ $radiuses: (
     2xl: 1.5rem,
     3xl: 1.875rem,
     pill: 9999px,
-    ) !default;
-
+) !default;
 $shadows: (
-    sm: (0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),
-    md: (0 4px 8px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.12)),
-    lg: (0 12px 20px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1)),
-    xl: (0 24px 32px -5px rgba(0, 0, 0, 0.25), 0 10px 12px -5px rgba(0, 0, 0, 0.15)),
-    modal: 0 8px 20px rgba(0, 0, 0, 0.12),
-    toast: 0 4px 12px rgba(0, 0, 0, 0.15)) !default;
-
+    sm: (
+        0 2px 4px 0 rgb(0 0 0 / 10%),
+        0 1px 2px -1px rgb(0 0 0 / 10%),
+    ),
+    md: (
+        0 4px 8px -1px rgb(0 0 0 / 15%),
+        0 2px 4px -2px rgb(0 0 0 / 12%),
+    ),
+    lg: (
+        0 12px 20px -3px rgb(0 0 0 / 20%),
+        0 4px 6px -2px rgb(0 0 0 / 10%),
+    ),
+    xl: (
+        0 24px 32px -5px rgb(0 0 0 / 25%),
+        0 10px 12px -5px rgb(0 0 0 / 15%),
+    ),
+    modal: 0 8px 20px rgb(0 0 0 / 12%),
+    toast: 0 4px 12px rgb(0 0 0 / 15%),
+) !default;
 $z-index: (
     base: 1,
     dropdown: 100,
@@ -41,8 +51,7 @@ $z-index: (
     popover: 500,
     tooltip: 600,
     toast: 9999,
-    ) !default;
-
+) !default;
 $breakpoints: (
     xs: 360px,
 
@@ -54,4 +63,5 @@ $breakpoints: (
 
     2xl: 1536px,
     3xl: 1920px,
-    4xl: 2560px) !default;
+    4xl: 2560px,
+) !default;

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

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

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

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