@filip.mazev/blocks-core 1.0.28 → 1.0.31

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

@@ -1,99 +1,4 @@
-@use '../palettes' as *;
+@use '../theme-engine' as *;
 
-$orange-light-theme: (
-    'bg-canvas': #ffffff,
-    'bg-surface': #ffffff,
-    'bg-surface-alt': get-color-from-palette('orange', 50),
-    'bg-element': get-color-from-palette('neutral', 100),
-    'bg-element-hover': get-color-from-palette('orange', 200),
-
-    'primary': get-color-from-palette('orange', 500),
-    'primary-hover': get-color-from-palette('orange', 600),
-    'primary-active': get-color-from-palette('orange', 700),
-    'primary-subtle': rgba(get-color-from-palette('orange', 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('orange', 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('orange', 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('orange', 100),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 300) -10.44%, get-color-from-palette('orange', 400) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 400) -10.44%, get-color-from-palette('orange', 700) 100%),
-    ) !default;
-
-$orange-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('orange', 700),
-
-    'primary': get-color-from-palette('orange', 500),
-    'primary-hover': get-color-from-palette('orange', 400),
-    'primary-active': get-color-from-palette('orange', 300),
-    'primary-subtle': rgba(get-color-from-palette('orange', 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('orange', 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('orange', 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('orange', 900),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 700) -10.44%, get-color-from-palette('orange', 500) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 500) -10.44%, get-color-from-palette('orange', 400) 100%),
-    ) !default;
+$orange-light-theme: make-light-theme('orange');
+$orange-dark-theme: make-dark-theme('orange');

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

@@ -1,99 +1,4 @@
-@use '../palettes' as *;
+@use '../theme-engine' as *;
 
-$purple-light-theme: (
-    'bg-canvas': #ffffff,
-    'bg-surface': #ffffff,
-    'bg-surface-alt': get-color-from-palette('purple', 50),
-    'bg-element': get-color-from-palette('neutral', 100),
-    'bg-element-hover': get-color-from-palette('purple', 200),
-
-    'primary': get-color-from-palette('purple', 500),
-    'primary-hover': get-color-from-palette('purple', 600),
-    'primary-active': get-color-from-palette('purple', 700),
-    'primary-subtle': rgba(get-color-from-palette('purple', 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('purple', 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('purple', 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('purple', 100),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 300) -10.44%, get-color-from-palette('purple', 400) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 400) -10.44%, get-color-from-palette('purple', 700) 100%),
-    ) !default;
-
-$purple-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('purple', 700),
-
-    'primary': get-color-from-palette('purple', 500),
-    'primary-hover': get-color-from-palette('purple', 400),
-    'primary-active': get-color-from-palette('purple', 300),
-    'primary-subtle': rgba(get-color-from-palette('purple', 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('purple', 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('purple', 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('purple', 900),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 700) -10.44%, get-color-from-palette('purple', 500) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 500) -10.44%, get-color-from-palette('purple', 400) 100%),
-    ) !default;
+$purple-light-theme: make-light-theme('purple');
+$purple-dark-theme: make-dark-theme('purple');

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

@@ -1,99 +1,4 @@
-@use '../palettes' as *;
+@use '../theme-engine' as *;
 
-$red-light-theme: (
-    'bg-canvas': #ffffff,
-    'bg-surface': #ffffff,
-    'bg-surface-alt': get-color-from-palette('red', 50),
-    'bg-element': get-color-from-palette('neutral', 100),
-    'bg-element-hover': get-color-from-palette('red', 200),
-
-    'primary': get-color-from-palette('red', 500),
-    'primary-hover': get-color-from-palette('red', 600),
-    'primary-active': get-color-from-palette('red', 700),
-    'primary-subtle': rgba(get-color-from-palette('red', 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('red', 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('red', 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('red', 100),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('red', 300) -10.44%, get-color-from-palette('red', 400) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('red', 400) -10.44%, get-color-from-palette('red', 700) 100%),
-    ) !default;
-
-$red-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('red', 700),
-
-    'primary': get-color-from-palette('red', 500),
-    'primary-hover': get-color-from-palette('red', 400),
-    'primary-active': get-color-from-palette('red', 300),
-    'primary-subtle': rgba(get-color-from-palette('red', 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('red', 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('red', 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('red', 900),
-    'scroll-thumb': linear-gradient(278deg, get-color-from-palette('red', 700) -10.44%, get-color-from-palette('red', 500) 100%),
-    'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('red', 500) -10.44%, get-color-from-palette('red', 400) 100%),
-    ) !default;
+$red-light-theme: make-light-theme('red');
+$red-dark-theme: make-dark-theme('red');

package/types/filip.mazev-blocks-core.d.ts

@@ -141,7 +141,9 @@ declare class ThemingService implements OnDestroy {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemingService>;
 }
 
-declare const PALETTE_NAMES: readonly ["orange", "purple", "red", "green", "error", "success", "information", "neutral"];
+type SemanticColorToken = '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';
+
+declare const PALETTE_NAMES: readonly ["orange", "purple", "red", "green", "danger", "success", "information", "neutral"];
 declare const SHADE_NUMBERS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
 declare const TOKEN_PREFIX = "bx";
 declare const TOKEN_DELIMITER = "-";
@@ -178,7 +180,6 @@ type MSStreamWindow = Window & {
 
 type ThemePalette = (typeof PALETTE_NAMES)[number];
 type ThemeShade = (typeof SHADE_NUMBERS)[number];
-type SemanticColorToken = 'bg-canvas' | 'bg-surface' | 'bg-surface-alt' | 'bg-element' | 'bg-element-hover' | 'primary' | 'primary-hover' | 'primary-active' | 'primary-subtle' | 'on-primary' | 'text-heading' | 'text-primary' | 'text-secondary' | 'text-brand' | 'text-inverse' | 'border-subtle' | 'border-default' | 'border-strong' | 'border-brand' | 'info-bg' | 'info-bg-subtle' | 'info-border' | 'info-text' | 'success-bg' | 'success-bg-subtle' | 'success-border' | 'success-text' | 'warn-bg' | 'warn-bg-subtle' | 'warn-border' | 'warn-text' | 'error-bg' | 'error-bg-subtle' | 'error-border' | 'error-text' | 'scroll-bg' | 'scroll-thumb' | 'scroll-thumb-hover';
 type ThemeColorToken = `${ThemePalette}-${ThemeShade}`;
 type Color = ThemeColorToken | SemanticColorToken;
 type ThemedColor = Color | {

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

@@ -1,37 +0,0 @@
-@use 'sass:map';
-@use 'palettes' as *;
-@use './themes/orange-theme' as *;
-
-$semantic-keys: map-keys($orange-light-theme);
-
-@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};
-            }
-        }
-    }
-}