@filip.mazev/blocks-core 1.0.28 → 1.0.31

package/src/lib/styles/_theme-engine.scss

@@ -0,0 +1,249 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'palettes' as *;
+
+$required-theme-keys: (
+    'bg-canvas',
+    'bg-surface',
+    'bg-surface-alt',
+    'bg-element',
+    'bg-element-hover',
+    'bg-element-active',
+
+    'primary',
+    'primary-hover',
+    'primary-active',
+    'primary-subtle',
+    'on-primary',
+
+    'text-heading',
+    'text-primary',
+    'text-secondary',
+    'text-brand',
+    'text-inverse',
+    'text-info',
+    'text-warn',
+    'text-success',
+    'text-danger',
+
+    'border-subtle',
+    'border-default',
+    'border-strong',
+    'border-brand',
+    'border-info',
+    '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'
+);
+
+@function validate-theme($theme, $theme-name) {
+    @each $key in $required-theme-keys {
+        @if not map.has-key($theme, $key) {
+            @error "Strict Theme Error: '#{$theme-name}' is missing the required key '#{$key}'.";
+        }
+    }
+
+    @each $key, $value in $theme {
+        @if not list.index($required-theme-keys, $key) {
+            @error "Strict Theme Error: '#{$theme-name}' contains an invalid key '#{$key}'. Remove or rename it.";
+        }
+    }
+
+    @return $theme;
+}
+
+@function make-light-theme($brand, $overrides: ()) {
+    $base: (
+        'bg-canvas': #ffffff,
+        'bg-surface': #ffffff,
+        'bg-surface-alt': get-color-from-palette($brand, 50),
+        'bg-element': get-color-from-palette('neutral', 100),
+        'bg-element-hover': get-color-from-palette($brand, 200),
+        'bg-element-active': get-color-from-palette($brand, 300),
+
+        'primary': get-color-from-palette($brand, 500),
+        'primary-hover': get-color-from-palette($brand, 600),
+        'primary-active': get-color-from-palette($brand, 700),
+        'primary-subtle': rgba(get-color-from-palette($brand, 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),
+        'text-brand': get-color-from-palette($brand, 700),
+        'text-inverse': get-color-from-palette('neutral', 100),
+        'text-info': get-color-from-palette('information', 700),
+        '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),
+        'border-brand': get-color-from-palette($brand, 400),
+        'border-info': get-color-from-palette('information', 400),
+        '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-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-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-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),
+
+        'scroll-bg': get-color-from-palette($brand, 100),
+        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($brand, 300) -10.44%, get-color-from-palette($brand, 400) 100%),
+        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($brand, 400) -10.44%, get-color-from-palette($brand, 700) 100%),
+    );
+
+$merged-theme: map.merge($base, $overrides);
+
+@return validate-theme($merged-theme, '#{$brand}-light');
+}
+
+@function make-dark-theme($brand, $overrides: ()) {
+    $base: (
+        'bg-canvas': #000000,
+        'bg-surface': get-color-from-palette('neutral', 1000),
+        'bg-surface-alt': get-color-from-palette('neutral', 900),
+        'bg-element': get-color-from-palette('neutral', 800),
+        'bg-element-hover': get-color-from-palette($brand, 700),
+        'bg-element-active': get-color-from-palette($brand, 800),
+
+        'primary': get-color-from-palette($brand, 500),
+        'primary-hover': get-color-from-palette($brand, 400),
+        'primary-active': get-color-from-palette($brand, 300),
+        'primary-subtle': rgba(get-color-from-palette($brand, 700), 0.6),
+        'on-primary': #ffffff,
+
+        'text-heading': #ffffff,
+        'text-primary': get-color-from-palette('neutral', 200),
+        'text-secondary': get-color-from-palette('neutral', 400),
+        'text-brand': get-color-from-palette($brand, 300),
+        'text-inverse': get-color-from-palette('neutral', 900),
+        'text-info': get-color-from-palette('information', 400),
+        '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),
+        'border-brand': get-color-from-palette($brand, 600),
+        'border-info': get-color-from-palette('information', 400),
+        '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-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-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-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),
+
+        'scroll-bg': get-color-from-palette($brand, 900),
+        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($brand, 700) -10.44%, get-color-from-palette($brand, 500) 100%),
+        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($brand, 500) -10.44%, get-color-from-palette($brand, 400) 100%),
+    );
+
+$merged-theme: map.merge($base, $overrides);
+
+@return validate-theme($merged-theme, '#{$brand}-dark');
+}
+
+@mixin core-theme($config) {
+    @each $key, $value in $config {
+
+        @if $key !='meta-brand-palette' {
+            --bx-#{$key}: #{$value};
+
+            .bx-bg-#{$key} {
+                background-color: var(--bx-#{$key});
+                transition: background-color 0.2s ease-in-out;
+            }
+
+            .bx-text-#{$key} {
+                color: var(--bx-#{$key});
+                transition: color 0.2s ease-in-out;
+            }
+
+            .bx-border-#{$key} {
+                border-color: var(--bx-#{$key});
+                transition: border-color 0.2s ease-in-out;
+            }
+        }
+
+        @if $key =='meta-brand-palette' {
+            $brand-palette: get-palette($value);
+
+            @each $shade, $color in $brand-palette {
+                --bx-color-primary-#{$shade}: #{$color};
+            }
+        }
+    }
+}

package/src/lib/styles/_utilities.scss

@@ -145,4 +145,12 @@
             }
         }
     }
+
+    .bx-icon-pos-start {
+        margin-right: 0.5rem;
+    }
+
+    .bx-icon-pos-end {
+        margin-left: 0.5rem;
+    }
 }

package/src/lib/styles/themes/_green-theme.scss

@@ -1,99 +1,4 @@
-@use '../palettes' as *;
+@use '../theme-engine' as *;
 
-$green-light-theme: (
-    'bg-canvas': #ffffff,
-    'bg-surface': #ffffff,
-    'bg-surface-alt': get-color-from-palette('green', 50),
-    'bg-element': get-color-from-palette('neutral', 100),
-    'bg-element-hover': get-color-from-palette('green', 200),
-
-    'primary': get-color-from-palette('green', 500),
-    'primary-hover': get-color-from-palette('green', 600),
-    'primary-active': get-color-from-palette('green', 700),
-    'primary-subtle': rgba(get-color-from-palette('green', 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),
-    'text-brand': get-color-from-palette('green', 700),
-    'text-inverse': get-color-from-palette('neutral', 100),
-
-    'border-subtle': get-color-from-palette('neutral', 200),
-    'border-default': get-color-from-palette('neutral', 300),
-    'border-strong': get-color-from-palette('neutral', 400),
-    'border-brand': get-color-from-palette('green', 400),
-
-    'info-bg': get-color-from-palette('information', 100),
-    'info-bg-subtle': rgba(get-color-from-palette('information', 50), 0.95),
-    'info-border': get-color-from-palette('information', 200),
-    'info-text': get-color-from-palette('information', 700),
-
-    'success-bg': get-color-from-palette('success', 100),
-    'success-bg-subtle': rgba(get-color-from-palette('success', 50), 0.95),
-    'success-border': get-color-from-palette('success', 200),
-    'success-text': get-color-from-palette('success', 700),
-
-    'warn-bg': get-color-from-palette('warn', 100),
-    'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
-    'warn-border': get-color-from-palette('warn', 200),
-    'warn-text': get-color-from-palette('warn', 700),
-
-    'error-bg': get-color-from-palette('error', 100),
-    'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
-    'error-border': get-color-from-palette('error', 200),
-    'error-text': get-color-from-palette('error', 700),
-
-    'scroll-bg': get-color-from-palette('green', 100),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('green', 300) -10.44%, get-color-from-palette('green', 400) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('green', 400) -10.44%, get-color-from-palette('green', 700) 100%),
-    ) !default;
-
-$green-dark-theme: (
-    'bg-canvas': #000000,
-    'bg-surface': get-color-from-palette('neutral', 1000),
-    'bg-surface-alt': get-color-from-palette('neutral', 900),
-    'bg-element': get-color-from-palette('neutral', 800),
-    'bg-element-hover': get-color-from-palette('green', 700),
-
-    'primary': get-color-from-palette('green', 500),
-    'primary-hover': get-color-from-palette('green', 400),
-    'primary-active': get-color-from-palette('green', 300),
-    'primary-subtle': rgba(get-color-from-palette('green', 700), 0.6),
-    'on-primary': #ffffff,
-
-    'text-heading': #ffffff,
-    'text-primary': get-color-from-palette('neutral', 200),
-    'text-secondary': get-color-from-palette('neutral', 400),
-    'text-brand': get-color-from-palette('green', 300),
-    'text-inverse': get-color-from-palette('neutral', 900),
-
-    'border-subtle': get-color-from-palette('neutral', 900),
-    'border-default': get-color-from-palette('neutral', 800),
-    'border-strong': get-color-from-palette('neutral', 700),
-    'border-brand': get-color-from-palette('green', 600),
-
-    'info-bg': get-color-from-palette('information', 900),
-    'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
-    'info-border': get-color-from-palette('information', 900),
-    'info-text': get-color-from-palette('information', 400),
-
-    'success-bg': get-color-from-palette('success', 900),
-    'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
-    'success-border': get-color-from-palette('success', 900),
-    'success-text': get-color-from-palette('success', 400),
-
-    'warn-bg': get-color-from-palette('warn', 900),
-    'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
-    'warn-border': get-color-from-palette('warn', 900),
-    'warn-text': get-color-from-palette('warn', 400),
-
-    'error-bg': get-color-from-palette('error', 900),
-    'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
-    'error-border': get-color-from-palette('error', 900),
-    'error-text': get-color-from-palette('error', 400),
-
-    'scroll-bg': get-color-from-palette('green', 900),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('green', 700) -10.44%, get-color-from-palette('green', 500) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('green', 500) -10.44%, get-color-from-palette('green', 400) 100%),
-    ) !default;
+$green-light-theme: make-light-theme('green');
+$green-dark-theme: make-dark-theme('green');

package/src/lib/styles/themes/_high-contrast-theme.scss

@@ -1,97 +1,122 @@
 @use '../palettes' as *;
-
-$high-contrast-light-theme: (
-    'bg-canvas': $hc-white,
-    'bg-surface': $hc-white,
-    'bg-surface-alt': $hc-white,
-    'bg-element': $hc-white,
-    'bg-element-hover': $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,
-
-    'border-subtle': $hc-black,
-    'border-default': $hc-black,
-    'border-strong': $hc-black,
-    'border-brand': $hc-black,
-
-    'info-bg': $hc-white,
-    'info-bg-subtle': $hc-white,
-    'info-border': $hc-black,
-    'info-text': $hc-cyan,
-
-    'success-bg': $hc-white,
-    'success-bg-subtle': $hc-white,
-    'success-border': $hc-black,
-    'success-text': $hc-green,
-
-    'warn-bg': $hc-white,
-    'warn-bg-subtle': $hc-white,
-    'warn-border': $hc-black,
-    'warn-text': $hc-yellow,
-
-    'error-bg': $hc-white,
-    'error-bg-subtle': $hc-white,
-    'error-border': $hc-black,
-    'error-text': $hc-red,
-
-    'scroll-bg': $hc-white,
-    'scroll-thumb': $hc-black,
-    'scroll-thumb-hover': $hc-yellow) !default;
-
-$high-contrast-dark-theme: (
-    'bg-canvas': $hc-black,
-    'bg-surface': $hc-black,
-    'bg-surface-alt': $hc-black,
-    'bg-element': $hc-black,
-    'bg-element-hover': $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,
-
-    'border-subtle': $hc-white,
-    'border-default': $hc-white,
-    'border-strong': $hc-white,
-    'border-brand': $hc-white,
-
-    'info-bg': $hc-black,
-    'info-bg-subtle': $hc-black,
-    'info-border': $hc-white,
-    'info-text': $hc-cyan,
-
-    'success-bg': $hc-black,
-    'success-bg-subtle': $hc-black,
-    'success-border': $hc-white,
-    'success-text': $hc-green,
-
-    'warn-bg': $hc-black,
-    'warn-bg-subtle': $hc-black,
-    'warn-border': $hc-white,
-    'warn-text': $hc-yellow,
-
-    'error-bg': $hc-black,
-    'error-bg-subtle': $hc-black,
-    'error-border': $hc-white,
-    'error-text': $hc-red,
-
-    'scroll-bg': $hc-black,
-    'scroll-thumb': $hc-white,
-    'scroll-thumb-hover': $hc-yellow) !default;
+@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,
+
+            '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), '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,
+
+            '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), 'high-contrast-dark') !default;