@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
|
@@ -4,101 +4,101 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
@each $key, $val in $spacing {
|
|
7
|
-
.
|
|
7
|
+
.bx-p-#{$key} {
|
|
8
8
|
padding: #{$val};
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.
|
|
11
|
+
.bx-pt-#{$key} {
|
|
12
12
|
padding-top: #{$val};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.
|
|
15
|
+
.bx-pr-#{$key} {
|
|
16
16
|
padding-right: #{$val};
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.bx-pb-#{$key} {
|
|
20
20
|
padding-bottom: #{$val};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.
|
|
23
|
+
.bx-pl-#{$key} {
|
|
24
24
|
padding-left: #{$val};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.
|
|
27
|
+
.bx-px-#{$key} {
|
|
28
28
|
padding-left: #{$val};
|
|
29
29
|
padding-right: #{$val};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.
|
|
32
|
+
.bx-py-#{$key} {
|
|
33
33
|
padding-top: #{$val};
|
|
34
34
|
padding-bottom: #{$val};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.bx-m-#{$key} {
|
|
38
38
|
margin: #{$val};
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.
|
|
41
|
+
.bx-mt-#{$key} {
|
|
42
42
|
margin-top: #{$val};
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.
|
|
45
|
+
.bx-mr-#{$key} {
|
|
46
46
|
margin-right: #{$val};
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.
|
|
49
|
+
.bx-mb-#{$key} {
|
|
50
50
|
margin-bottom: #{$val};
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.
|
|
53
|
+
.bx-ml-#{$key} {
|
|
54
54
|
margin-left: #{$val};
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.
|
|
57
|
+
.bx-mx-#{$key} {
|
|
58
58
|
margin-left: #{$val};
|
|
59
59
|
margin-right: #{$val};
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
.
|
|
62
|
+
.bx-my-#{$key} {
|
|
63
63
|
margin-top: #{$val};
|
|
64
64
|
margin-bottom: #{$val};
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
@each $key, $val in $radiuses {
|
|
69
|
-
.
|
|
69
|
+
.bx-rounded-#{$key} {
|
|
70
70
|
border-radius: #{$val};
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.
|
|
73
|
+
.bx-rounded-t-#{$key} {
|
|
74
74
|
border-top-left-radius: #{$val};
|
|
75
75
|
border-top-right-radius: #{$val};
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
.
|
|
78
|
+
.bx-rounded-b-#{$key} {
|
|
79
79
|
border-bottom-left-radius: #{$val};
|
|
80
80
|
border-bottom-right-radius: #{$val};
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.
|
|
83
|
+
.bx-rounded-l-#{$key} {
|
|
84
84
|
border-top-left-radius: #{$val};
|
|
85
85
|
border-bottom-left-radius: #{$val};
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
88
|
+
.bx-rounded-r-#{$key} {
|
|
89
89
|
border-top-right-radius: #{$val};
|
|
90
90
|
border-bottom-right-radius: #{$val};
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
@each $key, $val in $shadows {
|
|
95
|
-
.
|
|
95
|
+
.bx-shadow-#{$key} {
|
|
96
96
|
box-shadow: #{$val};
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
@each $key, $val in $z-index {
|
|
101
|
-
.
|
|
101
|
+
.bx-z-#{$key} {
|
|
102
102
|
z-index: #{$val};
|
|
103
103
|
}
|
|
104
104
|
}
|
|
@@ -106,16 +106,16 @@
|
|
|
106
106
|
@each $palette-name, $shades in $all-palettes {
|
|
107
107
|
@if type-of($shades)=='map' {
|
|
108
108
|
@each $shade, $color in $shades {
|
|
109
|
-
.
|
|
110
|
-
background-color: var(--
|
|
109
|
+
.bx-bg-#{$palette-name}-#{$shade} {
|
|
110
|
+
background-color: var(--bx-color-#{$palette-name}-#{$shade});
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
.
|
|
114
|
-
color: var(--
|
|
113
|
+
.bx-text-#{$palette-name}-#{$shade} {
|
|
114
|
+
color: var(--bx-color-#{$palette-name}-#{$shade});
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
.
|
|
118
|
-
border-color: var(--
|
|
117
|
+
.bx-border-#{$palette-name}-#{$shade} {
|
|
118
|
+
border-color: var(--bx-color-#{$palette-name}-#{$shade});
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
}
|
|
@@ -123,25 +123,25 @@
|
|
|
123
123
|
|
|
124
124
|
:root {
|
|
125
125
|
@each $key, $val in $spacing {
|
|
126
|
-
--
|
|
126
|
+
--bx-space-#{$key}: #{$val};
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
@each $key, $val in $radiuses {
|
|
130
|
-
--
|
|
130
|
+
--bx-rounded-#{$key}: #{$val};
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
@each $key, $val in $shadows {
|
|
134
|
-
--
|
|
134
|
+
--bx-shadow-#{$key}: #{$val};
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
@each $key, $val in $z-index {
|
|
138
|
-
--
|
|
138
|
+
--bx-z-#{$key}: #{$val};
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
@each $palette-name, $shades in $all-palettes {
|
|
142
142
|
@if type-of($shades)=='map' {
|
|
143
143
|
@each $shade, $color in $shades {
|
|
144
|
-
--
|
|
144
|
+
--bx-color-#{$palette-name}-#{$shade}: #{$color};
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
}
|
|
@@ -1,131 +1,101 @@
|
|
|
1
1
|
@use '../palettes' as *;
|
|
2
2
|
|
|
3
3
|
$high-contrast-light-theme: (
|
|
4
|
-
|
|
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
|
+
|
|
5
10
|
'primary': $hc-black,
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
'
|
|
9
|
-
'
|
|
10
|
-
'accent-tertiary': $hc-yellow,
|
|
11
|
+
'primary-hover': $hc-black,
|
|
12
|
+
'primary-active': $hc-black,
|
|
13
|
+
'primary-subtle': $hc-white,
|
|
14
|
+
'on-primary': $hc-white,
|
|
11
15
|
|
|
12
|
-
|
|
16
|
+
'text-heading': $hc-black,
|
|
13
17
|
'text-primary': $hc-black,
|
|
14
18
|
'text-secondary': $hc-black,
|
|
15
|
-
'text-
|
|
16
|
-
'text-
|
|
17
|
-
|
|
18
|
-
'
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
'bg-
|
|
25
|
-
'border': $hc-black,
|
|
26
|
-
'
|
|
27
|
-
|
|
28
|
-
'
|
|
29
|
-
'
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
'
|
|
33
|
-
|
|
34
|
-
'
|
|
35
|
-
'
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
'
|
|
40
|
-
'
|
|
41
|
-
'
|
|
42
|
-
'
|
|
43
|
-
'
|
|
44
|
-
|
|
45
|
-
'feedback-success-border': $hc-black,
|
|
46
|
-
'feedback-success-accent': $hc-green,
|
|
47
|
-
'feedback-warn-bg': $hc-white,
|
|
48
|
-
'feedback-warn-border': $hc-black,
|
|
49
|
-
'feedback-warn-accent': $hc-yellow,
|
|
50
|
-
|
|
51
|
-
// Scrollbar & Sliders
|
|
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
|
+
'success-subtle': $hc-green,
|
|
37
|
+
|
|
38
|
+
'warn-bg': $hc-white,
|
|
39
|
+
'warn-bg-subtle': $hc-white,
|
|
40
|
+
'warn-border': $hc-black,
|
|
41
|
+
'warn-text': $hc-yellow,
|
|
42
|
+
|
|
43
|
+
'error-bg': $hc-white,
|
|
44
|
+
'error-bg-subtle': $hc-white,
|
|
45
|
+
'error-border': $hc-black,
|
|
46
|
+
'error-text': $hc-red,
|
|
47
|
+
'error-subtle': $hc-red,
|
|
48
|
+
|
|
52
49
|
'scroll-bg': $hc-white,
|
|
53
50
|
'scroll-thumb': $hc-black,
|
|
54
|
-
'scroll-thumb-
|
|
55
|
-
'slider-track': $hc-black,
|
|
56
|
-
'slider-thumb': $hc-black,
|
|
57
|
-
'slider-thumb-hover': $hc-yellow,
|
|
58
|
-
|
|
59
|
-
'canvas': $hc-white,
|
|
60
|
-
'surface': $hc-white,
|
|
61
|
-
'element': $hc-white,
|
|
62
|
-
'text': $hc-black,
|
|
63
|
-
'status-warn': $hc-red,
|
|
64
|
-
'status-error': $hc-red,
|
|
65
|
-
'error-subtle': rgba(0, 0, 0, 0.15)
|
|
66
|
-
);
|
|
51
|
+
'scroll-thumb-hover': $hc-yellow) !default;
|
|
67
52
|
|
|
68
53
|
$high-contrast-dark-theme: (
|
|
69
|
-
|
|
54
|
+
'bg-canvas': $hc-black,
|
|
55
|
+
'bg-surface': $hc-black,
|
|
56
|
+
'bg-surface-alt': $hc-black,
|
|
57
|
+
'bg-element': $hc-black,
|
|
58
|
+
'bg-element-hover': $hc-yellow,
|
|
59
|
+
|
|
70
60
|
'primary': $hc-white,
|
|
71
|
-
'
|
|
72
|
-
'
|
|
73
|
-
'
|
|
74
|
-
'
|
|
75
|
-
'accent-tertiary': $hc-yellow,
|
|
61
|
+
'primary-hover': $hc-white,
|
|
62
|
+
'primary-active': $hc-white,
|
|
63
|
+
'primary-subtle': $hc-black,
|
|
64
|
+
'on-primary': $hc-black,
|
|
76
65
|
|
|
77
|
-
|
|
66
|
+
'text-heading': $hc-white,
|
|
78
67
|
'text-primary': $hc-white,
|
|
79
68
|
'text-secondary': $hc-white,
|
|
80
|
-
'text-
|
|
81
|
-
'text-
|
|
82
|
-
|
|
83
|
-
'
|
|
84
|
-
'
|
|
85
|
-
'
|
|
86
|
-
'
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
'bg-
|
|
90
|
-
'border': $hc-white,
|
|
91
|
-
'
|
|
92
|
-
|
|
93
|
-
'
|
|
94
|
-
'
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
'
|
|
98
|
-
|
|
99
|
-
'
|
|
100
|
-
'
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
'
|
|
105
|
-
'
|
|
106
|
-
'
|
|
107
|
-
'
|
|
108
|
-
'
|
|
109
|
-
|
|
110
|
-
'feedback-success-border': $hc-white,
|
|
111
|
-
'feedback-success-accent': $hc-green,
|
|
112
|
-
'feedback-warn-bg': $hc-black,
|
|
113
|
-
'feedback-warn-border': $hc-white,
|
|
114
|
-
'feedback-warn-accent': $hc-yellow,
|
|
115
|
-
|
|
116
|
-
// Scrollbar & Sliders
|
|
69
|
+
'text-brand': $hc-white,
|
|
70
|
+
'text-inverse': $hc-black,
|
|
71
|
+
|
|
72
|
+
'border-subtle': $hc-white,
|
|
73
|
+
'border-default': $hc-white,
|
|
74
|
+
'border-strong': $hc-white,
|
|
75
|
+
'border-brand': $hc-white,
|
|
76
|
+
|
|
77
|
+
'info-bg': $hc-black,
|
|
78
|
+
'info-bg-subtle': $hc-black,
|
|
79
|
+
'info-border': $hc-white,
|
|
80
|
+
'info-text': $hc-cyan,
|
|
81
|
+
|
|
82
|
+
'success-bg': $hc-black,
|
|
83
|
+
'success-bg-subtle': $hc-black,
|
|
84
|
+
'success-border': $hc-white,
|
|
85
|
+
'success-text': $hc-green,
|
|
86
|
+
'success-subtle': $hc-green,
|
|
87
|
+
|
|
88
|
+
'warn-bg': $hc-black,
|
|
89
|
+
'warn-bg-subtle': $hc-black,
|
|
90
|
+
'warn-border': $hc-white,
|
|
91
|
+
'warn-text': $hc-yellow,
|
|
92
|
+
|
|
93
|
+
'error-bg': $hc-black,
|
|
94
|
+
'error-bg-subtle': $hc-black,
|
|
95
|
+
'error-border': $hc-white,
|
|
96
|
+
'error-text': $hc-red,
|
|
97
|
+
'error-subtle': $hc-red,
|
|
98
|
+
|
|
117
99
|
'scroll-bg': $hc-black,
|
|
118
100
|
'scroll-thumb': $hc-white,
|
|
119
|
-
'scroll-thumb-
|
|
120
|
-
'slider-track': $hc-white,
|
|
121
|
-
'slider-thumb': $hc-white,
|
|
122
|
-
'slider-thumb-hover': $hc-yellow,
|
|
123
|
-
|
|
124
|
-
'canvas': $hc-black,
|
|
125
|
-
'surface': $hc-black,
|
|
126
|
-
'element': $hc-black,
|
|
127
|
-
'text': $hc-white,
|
|
128
|
-
'status-warn': $hc-red,
|
|
129
|
-
'status-error': $hc-red,
|
|
130
|
-
'error-subtle': rgba(255, 255, 255, 0.2)
|
|
131
|
-
);
|
|
101
|
+
'scroll-thumb-hover': $hc-yellow) !default;
|
|
@@ -1,129 +1,99 @@
|
|
|
1
1
|
@use '../palettes' as *;
|
|
2
2
|
|
|
3
3
|
$orange-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('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),
|
|
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
|
-
'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('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
|
+
|
|
52
47
|
'scroll-bg': get-color-from-palette('orange', 100),
|
|
53
48
|
'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 300) -10.44%, get-color-from-palette('orange', 400) 100%),
|
|
54
|
-
'scroll-thumb-
|
|
55
|
-
|
|
56
|
-
'slider-thumb': get-color-from-palette('orange', 500),
|
|
57
|
-
'slider-thumb-hover': get-color-from-palette('orange', 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('orange', 500),
|
|
64
|
-
'status-error': get-color-from-palette('error', 500),
|
|
65
|
-
'error-subtle': get-color-from-palette('error', 50)) !default;
|
|
49
|
+
'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 400) -10.44%, get-color-from-palette('orange', 700) 100%),
|
|
50
|
+
) !default;
|
|
66
51
|
|
|
67
52
|
$orange-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
|
|
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
|
+
|
|
116
96
|
'scroll-bg': get-color-from-palette('orange', 900),
|
|
117
97
|
'scroll-thumb': linear-gradient(278deg, get-color-from-palette('orange', 700) -10.44%, get-color-from-palette('orange', 500) 100%),
|
|
118
|
-
'scroll-thumb-
|
|
119
|
-
|
|
120
|
-
'slider-thumb': get-color-from-palette('orange', 400),
|
|
121
|
-
'slider-thumb-hover': get-color-from-palette('orange', 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('orange', 500),
|
|
128
|
-
'status-error': get-color-from-palette('error', 400),
|
|
129
|
-
'error-subtle': rgba(get-color-from-palette('error', 500), 0.15)) !default;
|
|
98
|
+
'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette('orange', 500) -10.44%, get-color-from-palette('orange', 400) 100%),
|
|
99
|
+
) !default;
|