@filip.mazev/blocks-core 1.0.28 → 1.0.30

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 (13) hide show
  1. package/fesm2022/filip.mazev-blocks-core.mjs +32 -18
  2. package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/styles/_index.scss +1 -1
  5. package/src/lib/styles/_palettes.scss +24 -24
  6. package/src/lib/styles/_theme-engine.scss +246 -0
  7. package/src/lib/styles/themes/_green-theme.scss +3 -98
  8. package/src/lib/styles/themes/_high-contrast-theme.scss +119 -96
  9. package/src/lib/styles/themes/_orange-theme.scss +3 -98
  10. package/src/lib/styles/themes/_purple-theme.scss +3 -98
  11. package/src/lib/styles/themes/_red-theme.scss +3 -98
  12. package/types/filip.mazev-blocks-core.d.ts +3 -2
  13. package/src/lib/styles/_theme-provider.scss +0 -37
package/src/lib/styles/themes/_green-theme.scss CHANGED
@@ -1,99 +1,4 @@
1
- @use '../palettes' as *;
1
+ @use '../theme-engine' as *;
2
2
 
3
- $green-light-theme: (
4
- 'bg-canvas': #ffffff,
5
- 'bg-surface': #ffffff,
6
- 'bg-surface-alt': get-color-from-palette('green', 50),
7
- 'bg-element': get-color-from-palette('neutral', 100),
8
- 'bg-element-hover': get-color-from-palette('green', 200),
9
-
10
- 'primary': get-color-from-palette('green', 500),
11
- 'primary-hover': get-color-from-palette('green', 600),
12
- 'primary-active': get-color-from-palette('green', 700),
13
- 'primary-subtle': rgba(get-color-from-palette('green', 300), 0.6),
14
- 'on-primary': get-color-from-palette('neutral', 100),
15
-
16
- 'text-heading': get-color-from-palette('neutral', 900),
17
- 'text-primary': get-color-from-palette('neutral', 700),
18
- 'text-secondary': get-color-from-palette('neutral', 500),
19
- 'text-brand': get-color-from-palette('green', 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('green', 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
-
37
- 'warn-bg': get-color-from-palette('warn', 100),
38
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
39
- 'warn-border': get-color-from-palette('warn', 200),
40
- 'warn-text': get-color-from-palette('warn', 700),
41
-
42
- 'error-bg': get-color-from-palette('error', 100),
43
- 'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
44
- 'error-border': get-color-from-palette('error', 200),
45
- 'error-text': get-color-from-palette('error', 700),
46
-
47
- 'scroll-bg': get-color-from-palette('green', 100),
48
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('green', 300) -10.44%, get-color-from-palette('green', 400) 100%),
49
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('green', 400) -10.44%, get-color-from-palette('green', 700) 100%),
50
- ) !default;
51
-
52
- $green-dark-theme: (
53
- 'bg-canvas': #000000,
54
- 'bg-surface': get-color-from-palette('neutral', 1000),
55
- 'bg-surface-alt': get-color-from-palette('neutral', 900),
56
- 'bg-element': get-color-from-palette('neutral', 800),
57
- 'bg-element-hover': get-color-from-palette('green', 700),
58
-
59
- 'primary': get-color-from-palette('green', 500),
60
- 'primary-hover': get-color-from-palette('green', 400),
61
- 'primary-active': get-color-from-palette('green', 300),
62
- 'primary-subtle': rgba(get-color-from-palette('green', 700), 0.6),
63
- 'on-primary': #ffffff,
64
-
65
- 'text-heading': #ffffff,
66
- 'text-primary': get-color-from-palette('neutral', 200),
67
- 'text-secondary': get-color-from-palette('neutral', 400),
68
- 'text-brand': get-color-from-palette('green', 300),
69
- 'text-inverse': get-color-from-palette('neutral', 900),
70
-
71
- 'border-subtle': get-color-from-palette('neutral', 900),
72
- 'border-default': get-color-from-palette('neutral', 800),
73
- 'border-strong': get-color-from-palette('neutral', 700),
74
- 'border-brand': get-color-from-palette('green', 600),
75
-
76
- 'info-bg': get-color-from-palette('information', 900),
77
- 'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
78
- 'info-border': get-color-from-palette('information', 900),
79
- 'info-text': get-color-from-palette('information', 400),
80
-
81
- 'success-bg': get-color-from-palette('success', 900),
82
- 'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
83
- 'success-border': get-color-from-palette('success', 900),
84
- 'success-text': get-color-from-palette('success', 400),
85
-
86
- 'warn-bg': get-color-from-palette('warn', 900),
87
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
88
- 'warn-border': get-color-from-palette('warn', 900),
89
- 'warn-text': get-color-from-palette('warn', 400),
90
-
91
- 'error-bg': get-color-from-palette('error', 900),
92
- 'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
93
- 'error-border': get-color-from-palette('error', 900),
94
- 'error-text': get-color-from-palette('error', 400),
95
-
96
- 'scroll-bg': get-color-from-palette('green', 900),
97
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('green', 700) -10.44%, get-color-from-palette('green', 500) 100%),
98
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('green', 500) -10.44%, get-color-from-palette('green', 400) 100%),
99
- ) !default;
3
+ $green-light-theme: make-light-theme('green');
4
+ $green-dark-theme: make-dark-theme('green');
package/src/lib/styles/themes/_high-contrast-theme.scss CHANGED
@@ -1,97 +1,120 @@
1
1
  @use '../palettes' as *;
2
-
3
- $high-contrast-light-theme: (
4
- 'bg-canvas': $hc-white,
5
- 'bg-surface': $hc-white,
6
- 'bg-surface-alt': $hc-white,
7
- 'bg-element': $hc-white,
8
- 'bg-element-hover': $hc-yellow,
9
-
10
- 'primary': $hc-black,
11
- 'primary-hover': $hc-black,
12
- 'primary-active': $hc-black,
13
- 'primary-subtle': $hc-white,
14
- 'on-primary': $hc-white,
15
-
16
- 'text-heading': $hc-black,
17
- 'text-primary': $hc-black,
18
- 'text-secondary': $hc-black,
19
- 'text-brand': $hc-black,
20
- 'text-inverse': $hc-white,
21
-
22
- 'border-subtle': $hc-black,
23
- 'border-default': $hc-black,
24
- 'border-strong': $hc-black,
25
- 'border-brand': $hc-black,
26
-
27
- 'info-bg': $hc-white,
28
- 'info-bg-subtle': $hc-white,
29
- 'info-border': $hc-black,
30
- 'info-text': $hc-cyan,
31
-
32
- 'success-bg': $hc-white,
33
- 'success-bg-subtle': $hc-white,
34
- 'success-border': $hc-black,
35
- 'success-text': $hc-green,
36
-
37
- 'warn-bg': $hc-white,
38
- 'warn-bg-subtle': $hc-white,
39
- 'warn-border': $hc-black,
40
- 'warn-text': $hc-yellow,
41
-
42
- 'error-bg': $hc-white,
43
- 'error-bg-subtle': $hc-white,
44
- 'error-border': $hc-black,
45
- 'error-text': $hc-red,
46
-
47
- 'scroll-bg': $hc-white,
48
- 'scroll-thumb': $hc-black,
49
- 'scroll-thumb-hover': $hc-yellow) !default;
50
-
51
- $high-contrast-dark-theme: (
52
- 'bg-canvas': $hc-black,
53
- 'bg-surface': $hc-black,
54
- 'bg-surface-alt': $hc-black,
55
- 'bg-element': $hc-black,
56
- 'bg-element-hover': $hc-yellow,
57
-
58
- 'primary': $hc-white,
59
- 'primary-hover': $hc-white,
60
- 'primary-active': $hc-white,
61
- 'primary-subtle': $hc-black,
62
- 'on-primary': $hc-black,
63
-
64
- 'text-heading': $hc-white,
65
- 'text-primary': $hc-white,
66
- 'text-secondary': $hc-white,
67
- 'text-brand': $hc-white,
68
- 'text-inverse': $hc-black,
69
-
70
- 'border-subtle': $hc-white,
71
- 'border-default': $hc-white,
72
- 'border-strong': $hc-white,
73
- 'border-brand': $hc-white,
74
-
75
- 'info-bg': $hc-black,
76
- 'info-bg-subtle': $hc-black,
77
- 'info-border': $hc-white,
78
- 'info-text': $hc-cyan,
79
-
80
- 'success-bg': $hc-black,
81
- 'success-bg-subtle': $hc-black,
82
- 'success-border': $hc-white,
83
- 'success-text': $hc-green,
84
-
85
- 'warn-bg': $hc-black,
86
- 'warn-bg-subtle': $hc-black,
87
- 'warn-border': $hc-white,
88
- 'warn-text': $hc-yellow,
89
-
90
- 'error-bg': $hc-black,
91
- 'error-bg-subtle': $hc-black,
92
- 'error-border': $hc-white,
93
- 'error-text': $hc-red,
94
-
95
- 'scroll-bg': $hc-black,
96
- 'scroll-thumb': $hc-white,
97
- 'scroll-thumb-hover': $hc-yellow) !default;
2
+ @use '../theme-engine' as *;
3
+
4
+ $high-contrast-light-theme: validate-theme(('bg-canvas': $hc-white,
5
+ 'bg-surface': $hc-white,
6
+ 'bg-surface-alt': $hc-white,
7
+ 'bg-element': $hc-white,
8
+ 'bg-element-hover': $hc-yellow,
9
+
10
+ 'primary': $hc-black,
11
+ 'primary-hover': $hc-black,
12
+ 'primary-active': $hc-black,
13
+ 'primary-subtle': $hc-white,
14
+ 'on-primary': $hc-white,
15
+
16
+ 'text-heading': $hc-black,
17
+ 'text-primary': $hc-black,
18
+ 'text-secondary': $hc-black,
19
+ 'text-brand': $hc-black,
20
+ 'text-inverse': $hc-white,
21
+ 'text-info': $hc-cyan,
22
+ 'text-success': $hc-green,
23
+ 'text-warn': $hc-yellow,
24
+ 'text-danger': $hc-red,
25
+
26
+ 'border-subtle': $hc-black,
27
+ 'border-default': $hc-black,
28
+ 'border-strong': $hc-black,
29
+ 'border-brand': $hc-black,
30
+ 'border-info': $hc-black,
31
+ 'border-success': $hc-black,
32
+ 'border-warn': $hc-black,
33
+ 'border-danger': $hc-black,
34
+
35
+ 'bg-info': $hc-white,
36
+ 'bg-info-hover': $hc-white,
37
+ 'bg-info-active': $hc-white,
38
+ 'bg-info-disabled': $hc-white,
39
+ 'bg-info-subtle': $hc-white,
40
+
41
+ 'bg-success': $hc-white,
42
+ 'bg-success-hover': $hc-white,
43
+ 'bg-success-active': $hc-white,
44
+ 'bg-success-disabled': $hc-white,
45
+ 'bg-success-subtle': $hc-white,
46
+
47
+ 'bg-warn': $hc-white,
48
+ 'bg-warn-hover': $hc-white,
49
+ 'bg-warn-active': $hc-white,
50
+ 'bg-warn-disabled': $hc-white,
51
+ 'bg-warn-subtle': $hc-white,
52
+
53
+ 'bg-danger': $hc-white,
54
+ 'bg-danger-hover': $hc-white,
55
+ 'bg-danger-active': $hc-white,
56
+ 'bg-danger-disabled': $hc-white,
57
+ 'bg-danger-subtle': $hc-white,
58
+
59
+ 'scroll-bg': $hc-white,
60
+ 'scroll-thumb': $hc-black,
61
+ 'scroll-thumb-hover': $hc-yellow), 'high-contrast-light') !default;
62
+
63
+ $high-contrast-dark-theme: validate-theme(('bg-canvas': $hc-black,
64
+ 'bg-surface': $hc-black,
65
+ 'bg-surface-alt': $hc-black,
66
+ 'bg-element': $hc-black,
67
+ 'bg-element-hover': $hc-yellow,
68
+
69
+ 'primary': $hc-white,
70
+ 'primary-hover': $hc-white,
71
+ 'primary-active': $hc-white,
72
+ 'primary-subtle': $hc-black,
73
+ 'on-primary': $hc-black,
74
+
75
+ 'text-heading': $hc-white,
76
+ 'text-primary': $hc-white,
77
+ 'text-secondary': $hc-white,
78
+ 'text-brand': $hc-white,
79
+ 'text-inverse': $hc-black,
80
+ 'text-info': $hc-cyan,
81
+ 'text-success': $hc-green,
82
+ 'text-warn': $hc-yellow,
83
+ 'text-danger': $hc-red,
84
+
85
+ 'border-subtle': $hc-white,
86
+ 'border-default': $hc-white,
87
+ 'border-strong': $hc-white,
88
+ 'border-brand': $hc-white,
89
+ 'border-info': $hc-white,
90
+ 'border-success': $hc-white,
91
+ 'border-warn': $hc-white,
92
+ 'border-danger': $hc-white,
93
+
94
+ 'bg-info': $hc-black,
95
+ 'bg-info-hover': $hc-black,
96
+ 'bg-info-active': $hc-black,
97
+ 'bg-info-disabled': $hc-black,
98
+ 'bg-info-subtle': $hc-black,
99
+
100
+ 'bg-success': $hc-black,
101
+ 'bg-success-hover': $hc-black,
102
+ 'bg-success-active': $hc-black,
103
+ 'bg-success-disabled': $hc-black,
104
+ 'bg-success-subtle': $hc-black,
105
+
106
+ 'bg-warn': $hc-black,
107
+ 'bg-warn-hover': $hc-black,
108
+ 'bg-warn-active': $hc-black,
109
+ 'bg-warn-disabled': $hc-black,
110
+ 'bg-warn-subtle': $hc-black,
111
+
112
+ 'bg-danger': $hc-black,
113
+ 'bg-danger-hover': $hc-black,
114
+ 'bg-danger-active': $hc-black,
115
+ 'bg-danger-disabled': $hc-black,
116
+ 'bg-danger-subtle': $hc-black,
117
+
118
+ 'scroll-bg': $hc-black,
119
+ 'scroll-thumb': $hc-white,
120
+ 'scroll-thumb-hover': $hc-yellow), 'high-contrast-dark') !default;
package/src/lib/styles/themes/_orange-theme.scss CHANGED
@@ -1,99 +1,4 @@
1
- @use '../palettes' as *;
1
+ @use '../theme-engine' as *;
2
2
 
3
- $orange-light-theme: (
4
- 'bg-canvas': #ffffff,
5
- 'bg-surface': #ffffff,
6
- 'bg-surface-alt': get-color-from-palette('orange', 50),
7
- 'bg-element': get-color-from-palette('neutral', 100),
8
- 'bg-element-hover': get-color-from-palette('orange', 200),
9
-
10
- 'primary': get-color-from-palette('orange', 500),
11
- 'primary-hover': get-color-from-palette('orange', 600),
12
- 'primary-active': get-color-from-palette('orange', 700),
13
- 'primary-subtle': rgba(get-color-from-palette('orange', 300), 0.6),
14
- 'on-primary': get-color-from-palette('neutral', 100),
15
-
16
- 'text-heading': get-color-from-palette('neutral', 900),
17
- 'text-primary': get-color-from-palette('neutral', 700),
18
- 'text-secondary': get-color-from-palette('neutral', 500),
19
- 'text-brand': get-color-from-palette('orange', 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('orange', 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
-
37
- 'warn-bg': get-color-from-palette('warn', 100),
38
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
39
- 'warn-border': get-color-from-palette('warn', 200),
40
- 'warn-text': get-color-from-palette('warn', 700),
41
-
42
- 'error-bg': get-color-from-palette('error', 100),
43
- 'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
44
- 'error-border': get-color-from-palette('error', 200),
45
- 'error-text': get-color-from-palette('error', 700),
46
-
47
- 'scroll-bg': get-color-from-palette('orange', 100),
48
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 300) -10.44%, get-color-from-palette('orange', 400) 100%),
49
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 400) -10.44%, get-color-from-palette('orange', 700) 100%),
50
- ) !default;
51
-
52
- $orange-dark-theme: (
53
- 'bg-canvas': #000000,
54
- 'bg-surface': get-color-from-palette('neutral', 1000),
55
- 'bg-surface-alt': get-color-from-palette('neutral', 900),
56
- 'bg-element': get-color-from-palette('neutral', 800),
57
- 'bg-element-hover': get-color-from-palette('orange', 700),
58
-
59
- 'primary': get-color-from-palette('orange', 500),
60
- 'primary-hover': get-color-from-palette('orange', 400),
61
- 'primary-active': get-color-from-palette('orange', 300),
62
- 'primary-subtle': rgba(get-color-from-palette('orange', 700), 0.6),
63
- 'on-primary': #ffffff,
64
-
65
- 'text-heading': #ffffff,
66
- 'text-primary': get-color-from-palette('neutral', 200),
67
- 'text-secondary': get-color-from-palette('neutral', 400),
68
- 'text-brand': get-color-from-palette('orange', 300),
69
- 'text-inverse': get-color-from-palette('neutral', 900),
70
-
71
- 'border-subtle': get-color-from-palette('neutral', 900),
72
- 'border-default': get-color-from-palette('neutral', 800),
73
- 'border-strong': get-color-from-palette('neutral', 700),
74
- 'border-brand': get-color-from-palette('orange', 600),
75
-
76
- 'info-bg': get-color-from-palette('information', 900),
77
- 'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
78
- 'info-border': get-color-from-palette('information', 900),
79
- 'info-text': get-color-from-palette('information', 400),
80
-
81
- 'success-bg': get-color-from-palette('success', 900),
82
- 'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
83
- 'success-border': get-color-from-palette('success', 900),
84
- 'success-text': get-color-from-palette('success', 400),
85
-
86
- 'warn-bg': get-color-from-palette('warn', 900),
87
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
88
- 'warn-border': get-color-from-palette('warn', 900),
89
- 'warn-text': get-color-from-palette('warn', 400),
90
-
91
- 'error-bg': get-color-from-palette('error', 900),
92
- 'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
93
- 'error-border': get-color-from-palette('error', 900),
94
- 'error-text': get-color-from-palette('error', 400),
95
-
96
- 'scroll-bg': get-color-from-palette('orange', 900),
97
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 700) -10.44%, get-color-from-palette('orange', 500) 100%),
98
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 500) -10.44%, get-color-from-palette('orange', 400) 100%),
99
- ) !default;
3
+ $orange-light-theme: make-light-theme('orange');
4
+ $orange-dark-theme: make-dark-theme('orange');
package/src/lib/styles/themes/_purple-theme.scss CHANGED
@@ -1,99 +1,4 @@
1
- @use '../palettes' as *;
1
+ @use '../theme-engine' as *;
2
2
 
3
- $purple-light-theme: (
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),
17
- 'text-primary': get-color-from-palette('neutral', 700),
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
-
37
- 'warn-bg': get-color-from-palette('warn', 100),
38
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
39
- 'warn-border': get-color-from-palette('warn', 200),
40
- 'warn-text': get-color-from-palette('warn', 700),
41
-
42
- 'error-bg': get-color-from-palette('error', 100),
43
- 'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
44
- 'error-border': get-color-from-palette('error', 200),
45
- 'error-text': get-color-from-palette('error', 700),
46
-
47
- 'scroll-bg': get-color-from-palette('purple', 100),
48
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 300) -10.44%, get-color-from-palette('purple', 400) 100%),
49
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 400) -10.44%, get-color-from-palette('purple', 700) 100%),
50
- ) !default;
51
-
52
- $purple-dark-theme: (
53
- 'bg-canvas': #000000,
54
- 'bg-surface': get-color-from-palette('neutral', 1000),
55
- 'bg-surface-alt': get-color-from-palette('neutral', 900),
56
- 'bg-element': get-color-from-palette('neutral', 800),
57
- 'bg-element-hover': get-color-from-palette('purple', 700),
58
-
59
- 'primary': get-color-from-palette('purple', 500),
60
- 'primary-hover': get-color-from-palette('purple', 400),
61
- 'primary-active': get-color-from-palette('purple', 300),
62
- 'primary-subtle': rgba(get-color-from-palette('purple', 700), 0.6),
63
- 'on-primary': #ffffff,
64
-
65
- 'text-heading': #ffffff,
66
- 'text-primary': get-color-from-palette('neutral', 200),
67
- 'text-secondary': get-color-from-palette('neutral', 400),
68
- 'text-brand': get-color-from-palette('purple', 300),
69
- 'text-inverse': get-color-from-palette('neutral', 900),
70
-
71
- 'border-subtle': get-color-from-palette('neutral', 900),
72
- 'border-default': get-color-from-palette('neutral', 800),
73
- 'border-strong': get-color-from-palette('neutral', 700),
74
- 'border-brand': get-color-from-palette('purple', 600),
75
-
76
- 'info-bg': get-color-from-palette('information', 900),
77
- 'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
78
- 'info-border': get-color-from-palette('information', 900),
79
- 'info-text': get-color-from-palette('information', 400),
80
-
81
- 'success-bg': get-color-from-palette('success', 900),
82
- 'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
83
- 'success-border': get-color-from-palette('success', 900),
84
- 'success-text': get-color-from-palette('success', 400),
85
-
86
- 'warn-bg': get-color-from-palette('warn', 900),
87
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
88
- 'warn-border': get-color-from-palette('warn', 900),
89
- 'warn-text': get-color-from-palette('warn', 400),
90
-
91
- 'error-bg': get-color-from-palette('error', 900),
92
- 'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
93
- 'error-border': get-color-from-palette('error', 900),
94
- 'error-text': get-color-from-palette('error', 400),
95
-
96
- 'scroll-bg': get-color-from-palette('purple', 900),
97
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('purple', 700) -10.44%, get-color-from-palette('purple', 500) 100%),
98
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('purple', 500) -10.44%, get-color-from-palette('purple', 400) 100%),
99
- ) !default;
3
+ $purple-light-theme: make-light-theme('purple');
4
+ $purple-dark-theme: make-dark-theme('purple');
package/src/lib/styles/themes/_red-theme.scss CHANGED
@@ -1,99 +1,4 @@
1
- @use '../palettes' as *;
1
+ @use '../theme-engine' as *;
2
2
 
3
- $red-light-theme: (
4
- 'bg-canvas': #ffffff,
5
- 'bg-surface': #ffffff,
6
- 'bg-surface-alt': get-color-from-palette('red', 50),
7
- 'bg-element': get-color-from-palette('neutral', 100),
8
- 'bg-element-hover': get-color-from-palette('red', 200),
9
-
10
- 'primary': get-color-from-palette('red', 500),
11
- 'primary-hover': get-color-from-palette('red', 600),
12
- 'primary-active': get-color-from-palette('red', 700),
13
- 'primary-subtle': rgba(get-color-from-palette('red', 300), 0.6),
14
- 'on-primary': get-color-from-palette('neutral', 100),
15
-
16
- 'text-heading': get-color-from-palette('neutral', 900),
17
- 'text-primary': get-color-from-palette('neutral', 700),
18
- 'text-secondary': get-color-from-palette('neutral', 500),
19
- 'text-brand': get-color-from-palette('red', 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('red', 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
-
37
- 'warn-bg': get-color-from-palette('warn', 100),
38
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 50), 0.95),
39
- 'warn-border': get-color-from-palette('warn', 200),
40
- 'warn-text': get-color-from-palette('warn', 700),
41
-
42
- 'error-bg': get-color-from-palette('error', 100),
43
- 'error-bg-subtle': rgba(get-color-from-palette('error', 50), 0.95),
44
- 'error-border': get-color-from-palette('error', 200),
45
- 'error-text': get-color-from-palette('error', 700),
46
-
47
- 'scroll-bg': get-color-from-palette('red', 100),
48
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('red', 300) -10.44%, get-color-from-palette('red', 400) 100%),
49
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('red', 400) -10.44%, get-color-from-palette('red', 700) 100%),
50
- ) !default;
51
-
52
- $red-dark-theme: (
53
- 'bg-canvas': #000000,
54
- 'bg-surface': get-color-from-palette('neutral', 1000),
55
- 'bg-surface-alt': get-color-from-palette('neutral', 900),
56
- 'bg-element': get-color-from-palette('neutral', 800),
57
- 'bg-element-hover': get-color-from-palette('red', 700),
58
-
59
- 'primary': get-color-from-palette('red', 500),
60
- 'primary-hover': get-color-from-palette('red', 400),
61
- 'primary-active': get-color-from-palette('red', 300),
62
- 'primary-subtle': rgba(get-color-from-palette('red', 700), 0.6),
63
- 'on-primary': #ffffff,
64
-
65
- 'text-heading': #ffffff,
66
- 'text-primary': get-color-from-palette('neutral', 200),
67
- 'text-secondary': get-color-from-palette('neutral', 400),
68
- 'text-brand': get-color-from-palette('red', 300),
69
- 'text-inverse': get-color-from-palette('neutral', 900),
70
-
71
- 'border-subtle': get-color-from-palette('neutral', 900),
72
- 'border-default': get-color-from-palette('neutral', 800),
73
- 'border-strong': get-color-from-palette('neutral', 700),
74
- 'border-brand': get-color-from-palette('red', 600),
75
-
76
- 'info-bg': get-color-from-palette('information', 900),
77
- 'info-bg-subtle': rgba(get-color-from-palette('information', 1000), 0.95),
78
- 'info-border': get-color-from-palette('information', 900),
79
- 'info-text': get-color-from-palette('information', 400),
80
-
81
- 'success-bg': get-color-from-palette('success', 900),
82
- 'success-bg-subtle': rgba(get-color-from-palette('success', 1000), 0.95),
83
- 'success-border': get-color-from-palette('success', 900),
84
- 'success-text': get-color-from-palette('success', 400),
85
-
86
- 'warn-bg': get-color-from-palette('warn', 900),
87
- 'warn-bg-subtle': rgba(get-color-from-palette('warn', 1000), 0.95),
88
- 'warn-border': get-color-from-palette('warn', 900),
89
- 'warn-text': get-color-from-palette('warn', 400),
90
-
91
- 'error-bg': get-color-from-palette('error', 900),
92
- 'error-bg-subtle': rgba(get-color-from-palette('error', 1000), 0.95),
93
- 'error-border': get-color-from-palette('error', 900),
94
- 'error-text': get-color-from-palette('error', 400),
95
-
96
- 'scroll-bg': get-color-from-palette('red', 900),
97
- 'scroll-thumb': linear-gradient(278deg, get-color-from-palette('red', 700) -10.44%, get-color-from-palette('red', 500) 100%),
98
- 'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('red', 500) -10.44%, get-color-from-palette('red', 400) 100%),
99
- ) !default;
3
+ $red-light-theme: make-light-theme('red');
4
+ $red-dark-theme: make-dark-theme('red');