@filip.mazev/blocks-core 1.0.25 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +9 -9
  2. package/fesm2022/filip.mazev-blocks-core.mjs +37 -69
  3. package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/src/lib/styles/_palettes.scss +46 -46
  6. package/src/lib/styles/_theme-provider.scss +8 -8
  7. package/src/lib/styles/_utilities.scss +32 -32
  8. package/src/lib/styles/themes/_high-contrast-theme.scss +76 -114
  9. package/src/lib/styles/themes/_orange-theme.scss +85 -119
  10. package/src/lib/styles/themes/_purple-theme.scss +85 -119
  11. package/types/filip.mazev-blocks-core.d.ts +2 -2
package/src/lib/styles/themes/_purple-theme.scss CHANGED
@@ -1,129 +1,95 @@
1
1
  @use '../palettes' as *;
2
2
 
3
3
  $purple-light-theme: (
4
- // General
5
- 'primary': get-color-from-palette('purple', 50),
6
- 'secondary': get-color-from-palette('neutral', 100),
7
- 'alt': get-color-from-palette('neutral', 1000),
8
- 'accent': get-color-from-palette('purple', 300),
9
- 'accent-alt': get-color-from-palette('purple', 500),
10
- 'accent-tertiary': get-color-from-palette('purple', 700),
11
-
12
- // Text
4
+ 'bg-canvas': #ffffff,
5
+ 'bg-surface': #ffffff,
6
+ 'bg-surface-alt': get-color-from-palette('purple', 50),
7
+ 'bg-element': get-color-from-palette('neutral', 100),
8
+ 'bg-element-hover': get-color-from-palette('purple', 200),
9
+
10
+ 'primary': get-color-from-palette('purple', 500),
11
+ 'primary-hover': get-color-from-palette('purple', 600),
12
+ 'primary-active': get-color-from-palette('purple', 700),
13
+ 'primary-subtle': rgba(get-color-from-palette('purple', 400), 0.6),
14
+ 'on-primary': get-color-from-palette('neutral', 100),
15
+
16
+ 'text-heading': get-color-from-palette('neutral', 900),
13
17
  'text-primary': get-color-from-palette('neutral', 700),
14
- 'text-secondary': get-color-from-palette('purple', 400),
15
- 'text-tertiary': get-color-from-palette('purple', 700),
16
- 'text-accent': get-color-from-palette('neutral', 100),
17
- 'text-accent-alt': get-color-from-palette('purple', 800),
18
- 'text-grayscale': get-color-from-palette('neutral', 900),
19
- 'menu-item-text': get-color-from-palette('neutral', 900),
20
- 'text-warn': get-color-from-palette('error', 500),
21
- 'text-confirm': get-color-from-palette('success', 500),
22
-
23
- // UI Elements
24
- 'bg-menu-item-hover': get-color-from-palette('purple', 200),
25
- 'border': get-color-from-palette('neutral', 300),
26
- 'border-grayscale-light': get-color-from-palette('neutral', 200),
27
- 'warn': get-color-from-palette('purple', 400),
28
- 'error': get-color-from-palette('error', 400),
29
- 'info': get-color-from-palette('information', 400),
30
-
31
- // Buttons
32
- 'button-primary': rgba(get-color-from-palette('purple', 400), 0.6),
33
- 'button-confirm': rgba(get-color-from-palette('success', 500), 0.44),
34
- 'button-warn': rgba(get-color-from-palette('error', 500), 0.38),
35
- 'button-grayscale': rgba(get-color-from-palette('neutral', 300), 0.7),
36
-
37
- // Feedback
38
- 'feedback-info-bg': get-color-from-palette('information', 50),
39
- 'feedback-info-border': get-color-from-palette('information', 200),
40
- 'feedback-info-accent': get-color-from-palette('information', 700),
41
- 'feedback-error-bg': get-color-from-palette('error', 50),
42
- 'feedback-error-border': get-color-from-palette('error', 200),
43
- 'feedback-error-accent': get-color-from-palette('error', 700),
44
- 'feedback-success-bg': get-color-from-palette('success', 50),
45
- 'feedback-success-border': get-color-from-palette('success', 200),
46
- 'feedback-success-accent': get-color-from-palette('success', 700),
47
- 'feedback-warn-bg': get-color-from-palette('warn', 50),
48
- 'feedback-warn-border': get-color-from-palette('warn', 200),
49
- 'feedback-warn-accent': get-color-from-palette('warn', 700),
50
-
51
- // Scrollbar & Sliders
18
+ 'text-secondary': get-color-from-palette('neutral', 500),
19
+ 'text-brand': get-color-from-palette('purple', 700),
20
+ 'text-inverse': get-color-from-palette('neutral', 100),
21
+
22
+ 'border-subtle': get-color-from-palette('neutral', 200),
23
+ 'border-default': get-color-from-palette('neutral', 300),
24
+ 'border-strong': get-color-from-palette('neutral', 400),
25
+ 'border-brand': get-color-from-palette('purple', 400),
26
+
27
+ 'info-bg': get-color-from-palette('information', 50),
28
+ 'info-border': get-color-from-palette('information', 200),
29
+ 'info-text': get-color-from-palette('information', 700),
30
+
31
+ 'success-bg': get-color-from-palette('success', 50),
32
+ 'success-border': get-color-from-palette('success', 200),
33
+ 'success-text': get-color-from-palette('success', 700),
34
+ 'success-subtle': rgba(get-color-from-palette('success', 500), 0.44),
35
+
36
+ 'warn-bg': get-color-from-palette('warn', 50),
37
+ 'warn-border': get-color-from-palette('warn', 200),
38
+ 'warn-text': get-color-from-palette('warn', 700),
39
+
40
+ 'error-bg': get-color-from-palette('error', 50),
41
+ 'error-border': get-color-from-palette('error', 200),
42
+ 'error-text': get-color-from-palette('error', 700),
43
+ 'error-subtle': rgba(get-color-from-palette('error', 500), 0.38),
44
+
52
45
  'scroll-bg': get-color-from-palette('purple', 100),
53
46
  'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 300) -10.44%, get-color-from-palette('purple', 400) 100%),
54
- 'scroll-thumb-highlighted': linear-gradient(278deg, get-color-from-palette('purple', 400) -10.44%, get-color-from-palette('purple', 700) 100%),
55
- 'slider-track': get-color-from-palette('neutral', 100),
56
- 'slider-thumb': get-color-from-palette('purple', 500),
57
- 'slider-thumb-hover': get-color-from-palette('purple', 600),
58
-
59
- 'canvas': #ffffff,
60
- 'surface': #ffffff,
61
- 'element': get-color-from-palette('neutral', 100),
62
- 'text': get-color-from-palette('neutral', 700),
63
- 'status-warn': get-color-from-palette('purple', 500),
64
- 'status-error': get-color-from-palette('error', 500),
65
- 'error-subtle': get-color-from-palette('error', 50)) !default;
47
+ 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 400) -10.44%, get-color-from-palette('purple', 700) 100%),
48
+ ) !default;
66
49
 
67
50
  $purple-dark-theme: (
68
- // General
69
- 'primary': get-color-from-palette('neutral', 1000),
70
- 'secondary': get-color-from-palette('neutral', 900),
71
- 'alt': get-color-from-palette('purple', 50),
72
- 'accent': get-color-from-palette('purple', 700),
73
- 'accent-alt': get-color-from-palette('purple', 500),
74
- 'accent-tertiary': get-color-from-palette('purple', 400),
75
-
76
- // Text
77
- 'text-primary': #ffffff,
78
- 'text-secondary': get-color-from-palette('purple', 400),
79
- 'text-tertiary': get-color-from-palette('purple', 300),
80
- 'text-accent': get-color-from-palette('neutral', 900),
81
- 'text-accent-alt': get-color-from-palette('purple', 200),
82
- 'text-grayscale': get-color-from-palette('neutral', 200),
83
- 'menu-item-text': get-color-from-palette('neutral', 200),
84
- 'text-warn': get-color-from-palette('error', 500),
85
- 'text-confirm': get-color-from-palette('success', 500),
86
-
87
- // UI Elements
88
- 'bg-menu-item-hover': get-color-from-palette('purple', 700),
89
- 'border': get-color-from-palette('neutral', 800),
90
- 'border-grayscale-light': rgba(get-color-from-palette('neutral', 700), 0.22),
91
- 'warn': get-color-from-palette('purple', 400),
92
- 'error': get-color-from-palette('error', 400),
93
- 'info': get-color-from-palette('information', 400),
94
-
95
- // Buttons
96
- 'button-primary': rgba(get-color-from-palette('purple', 500), 0.6),
97
- 'button-confirm': rgba(get-color-from-palette('success', 700), 0.44),
98
- 'button-warn': rgba(get-color-from-palette('error', 800), 0.38),
99
- 'button-grayscale': rgba(get-color-from-palette('neutral', 800), 0.7),
100
-
101
- // Feedback
102
- 'feedback-info-bg': get-color-from-palette('information', 1000),
103
- 'feedback-info-border': get-color-from-palette('information', 900),
104
- 'feedback-info-accent': get-color-from-palette('information', 400),
105
- 'feedback-error-bg': get-color-from-palette('error', 1000),
106
- 'feedback-error-border': get-color-from-palette('error', 900),
107
- 'feedback-error-accent': get-color-from-palette('error', 400),
108
- 'feedback-success-bg': get-color-from-palette('success', 1000),
109
- 'feedback-success-border': get-color-from-palette('success', 900),
110
- 'feedback-success-accent': get-color-from-palette('success', 400),
111
- 'feedback-warn-bg': get-color-from-palette('warn', 1000),
112
- 'feedback-warn-border': get-color-from-palette('warn', 900),
113
- 'feedback-warn-accent': get-color-from-palette('warn', 400),
114
-
115
- // Scroll & Sliders
51
+ 'bg-canvas': #000000,
52
+ 'bg-surface': get-color-from-palette('neutral', 1000),
53
+ 'bg-surface-alt': get-color-from-palette('neutral', 900),
54
+ 'bg-element': get-color-from-palette('neutral', 800),
55
+ 'bg-element-hover': get-color-from-palette('purple', 700),
56
+
57
+ 'primary': get-color-from-palette('purple', 500),
58
+ 'primary-hover': get-color-from-palette('purple', 400),
59
+ 'primary-active': get-color-from-palette('purple', 300),
60
+ 'primary-subtle': rgba(get-color-from-palette('purple', 500), 0.6),
61
+ 'on-primary': #ffffff,
62
+
63
+ 'text-heading': #ffffff,
64
+ 'text-primary': get-color-from-palette('neutral', 200),
65
+ 'text-secondary': get-color-from-palette('neutral', 400),
66
+ 'text-brand': get-color-from-palette('purple', 300),
67
+ 'text-inverse': get-color-from-palette('neutral', 900),
68
+
69
+ 'border-subtle': get-color-from-palette('neutral', 900),
70
+ 'border-default': get-color-from-palette('neutral', 800),
71
+ 'border-strong': get-color-from-palette('neutral', 700),
72
+ 'border-brand': get-color-from-palette('purple', 600),
73
+
74
+ 'info-bg': get-color-from-palette('information', 1000),
75
+ 'info-border': get-color-from-palette('information', 900),
76
+ 'info-text': get-color-from-palette('information', 400),
77
+
78
+ 'success-bg': get-color-from-palette('success', 1000),
79
+ 'success-border': get-color-from-palette('success', 900),
80
+ 'success-text': get-color-from-palette('success', 400),
81
+ 'success-subtle': rgba(get-color-from-palette('success', 700), 0.44),
82
+
83
+ 'warn-bg': get-color-from-palette('warn', 1000),
84
+ 'warn-border': get-color-from-palette('warn', 900),
85
+ 'warn-text': get-color-from-palette('warn', 400),
86
+
87
+ 'error-bg': get-color-from-palette('error', 1000),
88
+ 'error-border': get-color-from-palette('error', 900),
89
+ 'error-text': get-color-from-palette('error', 400),
90
+ 'error-subtle': rgba(get-color-from-palette('error', 800), 0.38),
91
+
116
92
  'scroll-bg': get-color-from-palette('purple', 900),
117
93
  'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 700) -10.44%, get-color-from-palette('purple', 500) 100%),
118
- 'scroll-thumb-highlighted': linear-gradient(278deg, get-color-from-palette('purple', 500) -10.44%, get-color-from-palette('purple', 400) 100%),
119
- 'slider-track': get-color-from-palette('neutral', 800),
120
- 'slider-thumb': get-color-from-palette('purple', 400),
121
- 'slider-thumb-hover': get-color-from-palette('purple', 500),
122
-
123
- 'canvas': #000000,
124
- 'surface': get-color-from-palette('neutral', 1000),
125
- 'element': get-color-from-palette('neutral', 900),
126
- 'text': #ffffff,
127
- 'status-warn': get-color-from-palette('purple', 500),
128
- 'status-error': get-color-from-palette('error', 400),
129
- 'error-subtle': rgba(get-color-from-palette('error', 500), 0.15)) !default;
94
+ 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 500) -10.44%, get-color-from-palette('purple', 400) 100%),
95
+ ) !default;
package/types/filip.mazev-blocks-core.d.ts CHANGED
@@ -143,7 +143,7 @@ declare class ThemingService implements OnDestroy {
143
143
 
144
144
  declare const PALETTE_NAMES: readonly ["orange", "purple", "error", "success", "information", "neutral"];
145
145
  declare const SHADE_NUMBERS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
146
- declare const TOKEN_PREFIX = "fm";
146
+ declare const TOKEN_PREFIX = "bx";
147
147
  declare const TOKEN_COLOR_DELIMITER = "color";
148
148
  declare const FALLBACK_COLOR = "#000000";
149
149
  declare const SEMANTIC_PAIRS: Partial<Record<SemanticColorToken, SemanticColorToken>>;
@@ -177,7 +177,7 @@ type MSStreamWindow = Window & {
177
177
 
178
178
  type ThemePalette = (typeof PALETTE_NAMES)[number];
179
179
  type ThemeShade = (typeof SHADE_NUMBERS)[number];
180
- type SemanticColorToken = 'primary' | 'secondary' | 'alt' | 'accent' | 'accent-alt' | 'accent-tertiary' | 'text' | 'text-primary' | 'text-secondary' | 'text-tertiary' | 'text-accent' | 'text-accent-alt' | 'text-grayscale' | 'menu-item-text' | 'text-warn' | 'text-confirm' | 'canvas' | 'surface' | 'element' | 'bg-menu-item-hover' | 'border' | 'border-grayscale-light' | 'warn' | 'error' | 'info' | 'success' | 'status-warn' | 'status-error' | 'error-subtle' | 'button-primary' | 'button-confirm' | 'button-warn' | 'button-grayscale' | 'feedback-info-bg' | 'feedback-info-border' | 'feedback-info-accent' | 'feedback-error-bg' | 'feedback-error-border' | 'feedback-error-accent' | 'feedback-success-bg' | 'feedback-success-border' | 'feedback-success-accent' | 'feedback-warn-bg' | 'feedback-warn-border' | 'feedback-warn-accent' | 'scroll-bg' | 'scroll-thumb' | 'scroll-thumb-highlighted' | 'slider-track' | 'slider-thumb' | 'slider-thumb-hover';
180
+ 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-border' | 'info-text' | 'success-bg' | 'success-border' | 'success-text' | 'success-subtle' | 'warn-bg' | 'warn-border' | 'warn-text' | 'error-bg' | 'error-border' | 'error-text' | 'error-subtle' | 'scroll-bg' | 'scroll-thumb' | 'scroll-thumb-hover';
181
181
  type ThemeColorToken = `${ThemePalette}-${ThemeShade}`;
182
182
  type Color = ThemeColorToken | SemanticColorToken;
183
183