@filip.mazev/blocks-core 1.0.25 → 1.0.27
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.
- package/README.md +9 -9
- package/fesm2022/filip.mazev-blocks-core.mjs +73 -74
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/_palettes.scss +46 -46
- package/src/lib/styles/_theme-provider.scss +8 -8
- package/src/lib/styles/_utilities.scss +32 -32
- package/src/lib/styles/themes/_high-contrast-theme.scss +84 -114
- package/src/lib/styles/themes/_orange-theme.scss +89 -119
- package/src/lib/styles/themes/_purple-theme.scss +91 -119
- package/types/filip.mazev-blocks-core.d.ts +17 -4
|
@@ -1,129 +1,101 @@
|
|
|
1
1
|
@use '../palettes' as *;
|
|
2
2
|
|
|
3
3
|
$purple-light-theme: (
|
|
4
|
-
|
|
5
|
-
'
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
'
|
|
9
|
-
|
|
10
|
-
'
|
|
11
|
-
|
|
12
|
-
|
|
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', 300), 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('
|
|
15
|
-
'text-
|
|
16
|
-
'text-
|
|
17
|
-
|
|
18
|
-
'
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
'bg-
|
|
25
|
-
'border': get-color-from-palette('
|
|
26
|
-
'
|
|
27
|
-
|
|
28
|
-
'
|
|
29
|
-
'
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
'
|
|
33
|
-
|
|
34
|
-
'
|
|
35
|
-
'
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
'
|
|
40
|
-
'
|
|
41
|
-
'
|
|
42
|
-
'
|
|
43
|
-
'
|
|
44
|
-
|
|
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', 100),
|
|
28
|
+
'info-bg-subtle': rgba(get-color-from-palette('information', 50), 0.95),
|
|
29
|
+
'info-border': get-color-from-palette('information', 200),
|
|
30
|
+
'info-text': get-color-from-palette('information', 700),
|
|
31
|
+
|
|
32
|
+
'success-bg': get-color-from-palette('success', 100),
|
|
33
|
+
'success-bg-subtle': rgba(get-color-from-palette('success', 50), 0.95),
|
|
34
|
+
'success-border': get-color-from-palette('success', 200),
|
|
35
|
+
'success-text': get-color-from-palette('success', 700),
|
|
36
|
+
'success-subtle': rgba(get-color-from-palette('success', 500), 0.44),
|
|
37
|
+
|
|
38
|
+
'warn-bg': get-color-from-palette('warn', 100),
|
|
39
|
+
'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
|
|
40
|
+
'warn-border': get-color-from-palette('warn', 200),
|
|
41
|
+
'warn-text': get-color-from-palette('warn', 700),
|
|
42
|
+
|
|
43
|
+
'error-bg': get-color-from-palette('error', 100),
|
|
44
|
+
'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
|
|
45
|
+
'error-border': get-color-from-palette('error', 200),
|
|
46
|
+
'error-text': get-color-from-palette('error', 700),
|
|
47
|
+
'error-subtle': rgba(get-color-from-palette('error', 500), 0.38),
|
|
48
|
+
|
|
52
49
|
'scroll-bg': get-color-from-palette('purple', 100),
|
|
53
50
|
'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 300) -10.44%, get-color-from-palette('purple', 400) 100%),
|
|
54
|
-
'scroll-thumb-
|
|
55
|
-
|
|
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;
|
|
51
|
+
'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 400) -10.44%, get-color-from-palette('purple', 700) 100%),
|
|
52
|
+
) !default;
|
|
66
53
|
|
|
67
54
|
$purple-dark-theme: (
|
|
68
|
-
|
|
69
|
-
'
|
|
70
|
-
'
|
|
71
|
-
'
|
|
72
|
-
'
|
|
73
|
-
|
|
74
|
-
'
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
'
|
|
78
|
-
'
|
|
79
|
-
|
|
80
|
-
'text-
|
|
81
|
-
'text-
|
|
82
|
-
'text-
|
|
83
|
-
'
|
|
84
|
-
'text-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
'
|
|
89
|
-
'border': get-color-from-palette('
|
|
90
|
-
|
|
91
|
-
'
|
|
92
|
-
'
|
|
93
|
-
'info': get-color-from-palette('information',
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
'
|
|
97
|
-
'
|
|
98
|
-
'
|
|
99
|
-
'
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
'
|
|
103
|
-
'
|
|
104
|
-
'
|
|
105
|
-
|
|
106
|
-
'
|
|
107
|
-
'
|
|
108
|
-
'
|
|
109
|
-
'
|
|
110
|
-
|
|
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
|
|
55
|
+
'bg-canvas': #000000,
|
|
56
|
+
'bg-surface': get-color-from-palette('neutral', 1000),
|
|
57
|
+
'bg-surface-alt': get-color-from-palette('neutral', 900),
|
|
58
|
+
'bg-element': get-color-from-palette('neutral', 800),
|
|
59
|
+
'bg-element-hover': get-color-from-palette('purple', 700),
|
|
60
|
+
|
|
61
|
+
'primary': get-color-from-palette('purple', 500),
|
|
62
|
+
'primary-hover': get-color-from-palette('purple', 400),
|
|
63
|
+
'primary-active': get-color-from-palette('purple', 300),
|
|
64
|
+
'primary-subtle': rgba(get-color-from-palette('purple', 700), 0.6),
|
|
65
|
+
'on-primary': #ffffff,
|
|
66
|
+
|
|
67
|
+
'text-heading': #ffffff,
|
|
68
|
+
'text-primary': get-color-from-palette('neutral', 200),
|
|
69
|
+
'text-secondary': get-color-from-palette('neutral', 400),
|
|
70
|
+
'text-brand': get-color-from-palette('purple', 300),
|
|
71
|
+
'text-inverse': get-color-from-palette('neutral', 900),
|
|
72
|
+
|
|
73
|
+
'border-subtle': get-color-from-palette('neutral', 900),
|
|
74
|
+
'border-default': get-color-from-palette('neutral', 800),
|
|
75
|
+
'border-strong': get-color-from-palette('neutral', 700),
|
|
76
|
+
'border-brand': get-color-from-palette('purple', 600),
|
|
77
|
+
|
|
78
|
+
'info-bg': get-color-from-palette('information', 900),
|
|
79
|
+
'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
|
|
80
|
+
'info-border': get-color-from-palette('information', 900),
|
|
81
|
+
'info-text': get-color-from-palette('information', 400),
|
|
82
|
+
|
|
83
|
+
'success-bg': get-color-from-palette('success', 900),
|
|
84
|
+
'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
|
|
85
|
+
'success-border': get-color-from-palette('success', 900),
|
|
86
|
+
'success-text': get-color-from-palette('success', 400),
|
|
87
|
+
|
|
88
|
+
'warn-bg': get-color-from-palette('warn', 900),
|
|
89
|
+
'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
|
|
90
|
+
'warn-border': get-color-from-palette('warn', 900),
|
|
91
|
+
'warn-text': get-color-from-palette('warn', 400),
|
|
92
|
+
|
|
93
|
+
'error-bg': get-color-from-palette('error', 900),
|
|
94
|
+
'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
|
|
95
|
+
'error-border': get-color-from-palette('error', 900),
|
|
96
|
+
'error-text': get-color-from-palette('error', 400),
|
|
97
|
+
|
|
116
98
|
'scroll-bg': get-color-from-palette('purple', 900),
|
|
117
99
|
'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 700) -10.44%, get-color-from-palette('purple', 500) 100%),
|
|
118
|
-
'scroll-thumb-
|
|
119
|
-
|
|
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;
|
|
100
|
+
'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 500) -10.44%, get-color-from-palette('purple', 400) 100%),
|
|
101
|
+
) !default;
|
|
@@ -143,7 +143,8 @@ 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 = "
|
|
146
|
+
declare const TOKEN_PREFIX = "bx";
|
|
147
|
+
declare const TOKEN_DELIMITER = "-";
|
|
147
148
|
declare const TOKEN_COLOR_DELIMITER = "color";
|
|
148
149
|
declare const FALLBACK_COLOR = "#000000";
|
|
149
150
|
declare const SEMANTIC_PAIRS: Partial<Record<SemanticColorToken, SemanticColorToken>>;
|
|
@@ -177,14 +178,22 @@ type MSStreamWindow = Window & {
|
|
|
177
178
|
|
|
178
179
|
type ThemePalette = (typeof PALETTE_NAMES)[number];
|
|
179
180
|
type ThemeShade = (typeof SHADE_NUMBERS)[number];
|
|
180
|
-
type SemanticColorToken = '
|
|
181
|
+
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';
|
|
181
182
|
type ThemeColorToken = `${ThemePalette}-${ThemeShade}`;
|
|
182
183
|
type Color = ThemeColorToken | SemanticColorToken;
|
|
184
|
+
type ThemedColor = Color | {
|
|
185
|
+
light: Color;
|
|
186
|
+
dark?: Color;
|
|
187
|
+
};
|
|
183
188
|
|
|
184
189
|
/**
|
|
185
190
|
* Type Guard: Detects if a token is a static palette shade (e.g., 'orange-500')
|
|
186
191
|
*/
|
|
187
192
|
declare function isPaletteToken(token: Color): token is ThemeColorToken;
|
|
193
|
+
/**
|
|
194
|
+
* Type Guard: Detects if the provided color is a ThemedColor configuration object.
|
|
195
|
+
*/
|
|
196
|
+
declare function isThemedColor(color: unknown): color is Extract<ThemedColor, object>;
|
|
188
197
|
/**
|
|
189
198
|
* Returns the correct CSS variable string based on the token type.
|
|
190
199
|
*/
|
|
@@ -193,8 +202,12 @@ declare function resolveTokenToCssVar(token: Color): string;
|
|
|
193
202
|
* Smartly resolves the complementary background token.
|
|
194
203
|
*/
|
|
195
204
|
declare function getComplementaryToken(token: Color): Color;
|
|
205
|
+
/**
|
|
206
|
+
* Provides the inverted value of a given token color
|
|
207
|
+
*/
|
|
208
|
+
declare function invertPaletteToken(token: Color): Color;
|
|
196
209
|
|
|
197
210
|
declare function uuidv4(): string;
|
|
198
211
|
|
|
199
|
-
export { BREAKPOINTS, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, TOKEN_COLOR_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, isPaletteToken, resolveTokenToCssVar, uuidv4 };
|
|
200
|
-
export type { Color, DeviceOS, DeviceOrientationType, DeviceState, DeviceTheme, IScrollLockConfig, LegacyScreenOrientation, MSStreamWindow, OperaCapableWindow, SemanticColorToken, ThemeColorToken, ThemePalette, ThemeShade, WindowDimensions };
|
|
212
|
+
export { BREAKPOINTS, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, invertPaletteToken, isPaletteToken, isThemedColor, resolveTokenToCssVar, uuidv4 };
|
|
213
|
+
export type { Color, DeviceOS, DeviceOrientationType, DeviceState, DeviceTheme, IScrollLockConfig, LegacyScreenOrientation, MSStreamWindow, OperaCapableWindow, SemanticColorToken, ThemeColorToken, ThemePalette, ThemeShade, ThemedColor, WindowDimensions };
|