@syncfusion/ej2-base 24.2.7 → 25.1.35-579988

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 (163) hide show
  1. package/.eslintrc.json +2 -1
  2. package/CHANGELOG.md +641 -677
  3. package/{README.md → ReadMe.md} +100 -100
  4. package/dist/ej2-base.umd.min.js +1 -10
  5. package/dist/ej2-base.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-base.es2015.js +178 -1025
  7. package/dist/es6/ej2-base.es2015.js.map +1 -1
  8. package/dist/es6/ej2-base.es5.js +226 -934
  9. package/dist/es6/ej2-base.es5.js.map +1 -1
  10. package/dist/global/ej2-base.min.js +1 -10
  11. package/dist/global/ej2-base.min.js.map +1 -1
  12. package/dist/global/index.d.ts +0 -9
  13. package/dist/ts/ajax.ts +236 -0
  14. package/dist/ts/animation.ts +544 -0
  15. package/dist/ts/base.ts +357 -0
  16. package/dist/ts/browser.ts +387 -0
  17. package/dist/ts/child-property.ts +192 -0
  18. package/dist/ts/component.ts +519 -0
  19. package/dist/ts/dom.ts +488 -0
  20. package/dist/ts/draggable.ts +1155 -0
  21. package/dist/ts/droppable.ts +172 -0
  22. package/dist/ts/event-handler.ts +169 -0
  23. package/dist/ts/internationalization.ts +369 -0
  24. package/dist/ts/intl/date-formatter.ts +317 -0
  25. package/dist/ts/intl/date-parser.ts +426 -0
  26. package/dist/ts/intl/intl-base.ts +1104 -0
  27. package/dist/ts/intl/number-formatter.ts +411 -0
  28. package/dist/ts/intl/number-parser.ts +158 -0
  29. package/dist/ts/intl/parser-base.ts +394 -0
  30. package/dist/ts/keyboard.ts +238 -0
  31. package/dist/ts/l10n.ts +94 -0
  32. package/dist/ts/module-loader.ts +149 -0
  33. package/dist/ts/notify-property-change.ts +726 -0
  34. package/dist/ts/observer.ts +236 -0
  35. package/dist/ts/sanitize-helper.ts +224 -0
  36. package/dist/ts/template-engine.ts +191 -0
  37. package/dist/ts/template.ts +329 -0
  38. package/dist/ts/touch.ts +544 -0
  39. package/dist/ts/util.ts +523 -0
  40. package/dist/ts/validate-lic.ts +0 -0
  41. package/e2e/crypto.js +16 -16
  42. package/e2e/m.protractor.config.js +286 -286
  43. package/e2e/modified-protractor/protractor.config.js +316 -316
  44. package/e2e/protractor.config.js +389 -332
  45. package/helpers/e2e/index.js +3 -3
  46. package/license +10 -10
  47. package/package.json +225 -174
  48. package/src/ajax.d.ts +1 -1
  49. package/src/ajax.js +3 -8
  50. package/src/animation-model.d.ts +41 -41
  51. package/src/animation.d.ts +6 -6
  52. package/src/animation.js +25 -25
  53. package/src/base.d.ts +2 -1
  54. package/src/base.js +9 -7
  55. package/src/component-model.d.ts +16 -16
  56. package/src/component.d.ts +9 -3
  57. package/src/component.js +50 -38
  58. package/src/draggable-model.d.ts +113 -113
  59. package/src/draggable.d.ts +2 -0
  60. package/src/draggable.js +45 -29
  61. package/src/droppable-model.d.ts +23 -23
  62. package/src/droppable.js +19 -19
  63. package/src/event-handler.js +2 -1
  64. package/src/index.d.ts +0 -3
  65. package/src/index.js +0 -3
  66. package/src/intl/date-formatter.js +2 -6
  67. package/src/intl/date-parser.js +1 -20
  68. package/src/intl/intl-base.js +1 -164
  69. package/src/intl/number-formatter.d.ts +3 -0
  70. package/src/intl/number-formatter.js +7 -7
  71. package/src/intl/number-parser.js +1 -0
  72. package/src/keyboard-model.d.ts +16 -16
  73. package/src/keyboard.js +19 -19
  74. package/src/module-loader.d.ts +12 -0
  75. package/src/module-loader.js +11 -0
  76. package/src/notify-property-change.js +3 -2
  77. package/src/observer.js +2 -0
  78. package/src/sanitize-helper.js +5 -0
  79. package/src/template-engine.js +1 -0
  80. package/src/template.js +3 -2
  81. package/src/touch-model.d.ts +39 -39
  82. package/src/touch.js +19 -19
  83. package/src/validate-lic.d.ts +0 -11
  84. package/src/validate-lic.js +1 -259
  85. package/styles/_all.scss +2 -2
  86. package/styles/_bds-dark-definition.scss +15 -0
  87. package/styles/_bds-definition.scss +15 -0
  88. package/styles/_bootstrap-dark-definition.scss +42 -42
  89. package/styles/_bootstrap-definition.scss +42 -42
  90. package/styles/_bootstrap4-definition.scss +11 -11
  91. package/styles/_bootstrap5-dark-definition.scss +9 -9
  92. package/styles/_bootstrap5-definition.scss +8 -8
  93. package/styles/_fabric-dark-definition.scss +42 -42
  94. package/styles/_fabric-definition.scss +42 -42
  95. package/styles/_fluent-dark-definition.scss +9 -9
  96. package/styles/_fluent-definition.scss +9 -9
  97. package/styles/_fluent2-definition.scss +9 -0
  98. package/styles/_fusionnew-dark-definition.scss +8 -8
  99. package/styles/_fusionnew-definition.scss +8 -8
  100. package/styles/_highcontrast-definition.scss +42 -42
  101. package/styles/_highcontrast-light-definition.scss +42 -42
  102. package/styles/_material-dark-definition.scss +48 -48
  103. package/styles/_material-definition.scss +49 -49
  104. package/styles/_material3-dark-definition.scss +14 -14
  105. package/styles/_material3-definition.scss +15 -15
  106. package/styles/_tailwind-dark-definition.scss +15 -15
  107. package/styles/_tailwind-definition.scss +15 -15
  108. package/styles/animation/_all.scss +560 -560
  109. package/styles/bootstrap-dark.css +10 -1
  110. package/styles/bootstrap.css +10 -1
  111. package/styles/bootstrap4.css +10 -1
  112. package/styles/bootstrap5-dark.css +10 -1
  113. package/styles/bootstrap5.css +10 -1
  114. package/styles/common/_all.scss +2 -2
  115. package/styles/common/_core.scss +117 -117
  116. package/styles/common/_mixin.scss +9 -9
  117. package/styles/definition/_bds-dark.scss +1179 -0
  118. package/styles/definition/_bds.scss +1474 -0
  119. package/styles/definition/_bootstrap-dark.scss +219 -219
  120. package/styles/definition/_bootstrap.scss +215 -215
  121. package/styles/definition/_bootstrap4.scss +167 -167
  122. package/styles/definition/_bootstrap5-dark.scss +493 -493
  123. package/styles/definition/_bootstrap5.scss +494 -494
  124. package/styles/definition/_fabric-dark.scss +200 -200
  125. package/styles/definition/_fabric.scss +198 -198
  126. package/styles/definition/_fluent-dark.scss +557 -557
  127. package/styles/definition/_fluent.scss +558 -558
  128. package/styles/definition/_fluent2.scss +2198 -0
  129. package/styles/definition/_fusionnew-dark.scss +362 -362
  130. package/styles/definition/_fusionnew.scss +363 -363
  131. package/styles/definition/_highcontrast-light.scss +193 -193
  132. package/styles/definition/_highcontrast.scss +195 -195
  133. package/styles/definition/_material-dark.scss +198 -198
  134. package/styles/definition/_material.scss +192 -192
  135. package/styles/definition/_material3-dark.scss +710 -710
  136. package/styles/definition/_material3.scss +792 -792
  137. package/styles/definition/_tailwind-dark.scss +488 -488
  138. package/styles/definition/_tailwind.scss +485 -485
  139. package/styles/fabric-dark.css +10 -1
  140. package/styles/fabric.css +10 -1
  141. package/styles/fluent-dark.css +10 -1
  142. package/styles/fluent.css +10 -1
  143. package/styles/highcontrast-light.css +10 -1
  144. package/styles/highcontrast.css +10 -1
  145. package/styles/material-dark.css +10 -1
  146. package/styles/material.css +10 -1
  147. package/styles/material3-dark.css +10 -1
  148. package/styles/material3.css +10 -1
  149. package/styles/offline-theme/material-dark.css +10 -1
  150. package/styles/offline-theme/material.css +10 -1
  151. package/styles/offline-theme/tailwind-dark.css +10 -1
  152. package/styles/offline-theme/tailwind.css +10 -1
  153. package/styles/tailwind-dark.css +10 -1
  154. package/styles/tailwind.css +10 -1
  155. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -60
  156. package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -42
  157. package/bin/syncfusion-license.js +0 -2
  158. package/dist/ej2-base.min.js +0 -10
  159. package/e2e/index.d.ts +0 -27
  160. package/src/fetch.d.ts +0 -114
  161. package/src/fetch.js +0 -116
  162. package/src/hijri-parser.d.ts +0 -19
  163. package/src/hijri-parser.js +0 -204
package/styles/definition/_fluent2.scss ADDED
@@ -0,0 +1,2198 @@
1
+ @import '../common/mixin.scss';
2
+
3
+ // color system
4
+
5
+ @function mapcolorvariable($pallete-name){
6
+ @return var(#{'--color-sf-'+ $pallete-name});
7
+ }
8
+
9
+ :root {
10
+
11
+ //sf Variables
12
+ --color-sf-black: #000;
13
+ --color-sf-white: #fff;
14
+ --color-sf-primary: #0f6cbd;
15
+ --color-sf-primary-text-color: #fff;
16
+ --color-sf-primary-light: #b4d6fa;
17
+ --color-sf-primary-lighter: #ebf3fc;
18
+ --color-sf-primary-dark: #0f548c;
19
+ --color-sf-primary-darker: #0c3b5e;
20
+ --color-sf-success: #0e700e;
21
+ --color-sf-info: #008aa9;
22
+ --color-sf-warning: #bc4b09;
23
+ --color-sf-danger: #b10e1c;
24
+ --color-sf-success-light: #54b054;
25
+ --color-sf-info-light: #56bfd7;
26
+ --color-sf-warning-light: #fee5d7;
27
+ --color-sf-danger-light: #eeacb2;
28
+ --color-sf-success-dark: #54b054;
29
+ --color-sf-info-dark: #56bfd7;
30
+ --color-sf-warning-dark: #8a3707;
31
+ --color-sf-danger-dark: #6e0811;
32
+ --color-sf-success-light-alt: #f1faf1;
33
+ --color-sf-info-light-alt: #f2fafc;
34
+ --color-sf-warning-light-alt: #fff9f5;
35
+ --color-sf-danger-light-alt: #fdf3f4;
36
+ --color-sf-badge-warning: #fde300;
37
+ --color-sf-badge-warning-text: #847619;
38
+ --color-sf-primary-label-color: var(--color-sf-primary);
39
+ --color-sf-primary-cell-selection: var(--color-sf-primary-lighter);
40
+ --color-sf-brand-primary: #{#7e56d8};
41
+ --color-sf-brand-primary-d10: #{darken(#7e56d8, 5%)};
42
+ // backgroundcolor
43
+ --color-sf-content-bg-color: #fafafa;
44
+ --color-sf-content-bg-color-alt1: #fff;
45
+ --color-sf-content-bg-color-alt2: #f5f5f5;
46
+ --color-sf-content-bg-color-alt3: #e6e6e6;
47
+ --color-sf-content-bg-color-alt4: #f0f0f0;
48
+ --color-sf-content-bg-color-alt5: #ebebeb;
49
+ --color-sf-content-bg-color-alt6: #e6e6e6;
50
+ --color-sf-content-bg-color-hover: #f0f0f0;
51
+ --color-sf-content-bg-color-pressed: #dbdbdb;
52
+ --color-sf-content-bg-color-focus: #f0f0f0;
53
+ --color-sf-content-bg-color-selected: #e6e6e6;
54
+ --color-sf-content-bg-color-dragged: #ebf3fc;
55
+ --color-sf-content-bg-color-disabled: #f0f0f0;
56
+ --color-sf-flyout-bg-color: #fff;
57
+ --color-sf-flyout-bg-color-hover: #f5f5f5;
58
+ --color-sf-flyout-bg-color-pressed: #e0e0e0;
59
+ --color-sf-flyout-bg-color-selected: #ebebeb;
60
+ --color-sf-flyout-bg-color-focus: #f5f5f5;
61
+ --color-sf-overlay-bg-color: #000;
62
+ --color-sf-table-bg-color-hover: #f5f5f5;
63
+ --color-sf-table-bg-color-pressed: #e0e0e0;
64
+ --color-sf-table-bg-color-selected: #ebf3fc;
65
+
66
+ // text-color
67
+ --color-sf-content-text-color: #242424;
68
+ --color-sf-content-text-color-alt1: #424242;
69
+ --color-sf-content-text-color-alt2: #616161;
70
+ --color-sf-content-text-color-alt3: #707070;
71
+ --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
72
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
73
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
74
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color);
75
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
76
+ --color-sf-content-text-color-disabled: #bdbdbd;
77
+ --color-sf-placeholder-text-color: #707070;
78
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
79
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
80
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color);
81
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color);
82
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
83
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
84
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
85
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
86
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
87
+
88
+ // icon-color
89
+ --color-sf-icon-color: var(--color-sf-content-text-color-alt1);
90
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color);
91
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color);
92
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
93
+
94
+ // border-color
95
+ --color-sf-border-light: #e0e0e0;
96
+ --color-sf-border: #d1d1d1;
97
+ --color-sf-border-alt: #616161;
98
+ --color-sf-border-dark: #c7c7c7;
99
+ --color-sf-border-hover: #575757;
100
+ --color-sf-border-pressed: #4d4d4d;
101
+ --color-sf-border-focus: var(--color-sf-border);
102
+ --color-sf-border-selected: #b3b3b3;
103
+ --color-sf-border-dragged: var(--color-sf-primary);
104
+ --color-sf-border-disabled: var(--color-sf-border-light);
105
+ --color-sf-border-warning: #da3b01;
106
+ --color-sf-border-error: #c50f1f;
107
+ --color-sf-border-success: #107c10;
108
+ --color-sf-border-info: #0099bc;
109
+ --color-sf-spreadsheet-gridline: var(--color-sf-content-bg-color-alt3);
110
+ --color-sf-flyout-border: var(--color-sf-border-light);
111
+
112
+ // Primary-button
113
+ --color-sf-primary-bg-color: var(--color-sf-primary);
114
+ --color-sf-primary-border-color: var(--color-sf-primary);
115
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
116
+ --color-sf-primary-bg-color-hover: #115ea3;
117
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color-hover);
118
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
119
+ --color-sf-primary-bg-color-pressed: #0c3b5e;
120
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color-pressed);
121
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
122
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
123
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color-focus);
124
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-color);
125
+ --color-sf-primary-bg-color-disabled: #f0f0f0;
126
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
127
+ --color-sf-primary-text-disabled: #b8b8b8;
128
+ --color-sf-primary-bg-color-selected: #0f548c;
129
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color-selected);
130
+ --color-sf-primary-text-selected: var(--color-sf-primary-text-color);
131
+
132
+ // Secondary-button
133
+ --color-sf-secondary-bg-color: #fff;
134
+ --color-sf-secondary-border-color: #d1d1d1;
135
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
136
+ --color-sf-secondary-bg-color-hover: #f5f5f5;
137
+ --color-sf-secondary-border-color-hover: #c7c7c7;
138
+ --color-sf-secondary-text-color-hover: var(--color-sf-content-text-color);
139
+ --color-sf-secondary-bg-color-pressed: #e0e0e0;
140
+ --color-sf-secondary-border-color-pressed: #b3b3b3;
141
+ --color-sf-secondary-text-color-pressed: var(--color-sf-content-text-color);
142
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color);
143
+ --color-sf-secondary-border-color-focus: #000000;
144
+ --color-sf-secondary-text-color-focus: var(--color-sf-content-text-color);
145
+ --color-sf-secondary-bg-color-disabled: #f0f0f0;
146
+ --color-sf-secondary-border-color-disabled: #e0e0e0;
147
+ --color-sf-secondary-text-color-disabled: #bdbdbd;
148
+ --color-sf-secondary-bg-color-selected: #ebebeb;
149
+ --color-sf-secondary-border-color-selected: #bdbdbd;
150
+ --color-sf-secondary-text-color-selected: #242424;
151
+
152
+ // Success-button
153
+ --color-sf-success-bg-color: #107c10;
154
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
155
+ --color-sf-success-text: var(--color-sf-primary-text-color);
156
+ --color-sf-success-bg-color-hover: #0c5e0c;
157
+ --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
158
+ --color-sf-success-text-hover: var(--color-sf-primary-text-color);
159
+ --color-sf-success-bg-color-pressed: #052505;
160
+ --color-sf-success-border-color-pressed: var(--color-sf-success-bg-color-pressed);
161
+ --color-sf-success-text-pressed: var(--color-sf-primary-text-color);
162
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
163
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
164
+ --color-sf-success-text-focus: var(--color-sf-primary-text-color);
165
+ --color-sf-success-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
166
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
167
+ --color-sf-success-text-disabled: var(--color-sf-primary-text-disabled);
168
+ --color-sf-success-bg-color-selected: #094509;
169
+ --color-sf-success-border-color-selected: var(--color-sf-success-bg-color-selected);
170
+ --color-sf-success-text-selected: var(--color-sf-primary-text-color);
171
+
172
+ // Warning-button
173
+ --color-sf-warning-bg-color: #f7630c;
174
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
175
+ --color-sf-warning-text: var(--color-sf-content-text-color);
176
+ --color-sf-warning-bg-color-hover: #bc4b09;
177
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
178
+ --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
179
+ --color-sf-warning-bg-color-pressed: #4a1e04;
180
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-bg-color-pressed);
181
+ --color-sf-warning-text-pressed: var(--color-sf-primary-text-color);
182
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
183
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
184
+ --color-sf-warning-text-focus: var(--color-sf-primary-text-color);
185
+ --color-sf-warning-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
186
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
187
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
188
+ --color-sf-warning-bg-color-selected: #bc4b09;
189
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
190
+ --color-sf-warning-text-selected: var(--color-sf-primary-text-color);
191
+
192
+ // Info-button
193
+ --color-sf-info-bg-color: #31afcc;
194
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
195
+ --color-sf-info-text: var(--color-sf-content-text-color);
196
+ --color-sf-info-bg-color-hover: #008aa9;
197
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
198
+ --color-sf-info-text-hover: var(--color-sf-primary-text-color);
199
+ --color-sf-info-bg-color-pressed: #00748f;
200
+ --color-sf-info-border-color-pressed: var(--color-sf-info-bg-color-pressed);
201
+ --color-sf-info-text-pressed: var(--color-sf-primary-text-color);
202
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
203
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
204
+ --color-sf-info-text-focus: var(--color-sf-primary-text-color);
205
+ --color-sf-info-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
206
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
207
+ --color-sf-info-text-disabled: var(--color-sf-primary-text-disabled);
208
+ --color-sf-info-bg-color-selected: #005669;
209
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
210
+ --color-sf-info-text-selected: var(--color-sf-primary-text-color);
211
+
212
+ // danger-button
213
+ --color-sf-danger-bg-color: #c50f1f;
214
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
215
+ --color-sf-danger-text: var(--color-sf-primary-text-color);
216
+ --color-sf-danger-bg-color-hover: #960b18;
217
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
218
+ --color-sf-danger-text-hover: var(--color-sf-primary-text-color);
219
+ --color-sf-danger-bg-color-pressed: #3b0509;
220
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
221
+ --color-sf-danger-text-pressed: var(--color-sf-primary-text-color);
222
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
223
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
224
+ --color-sf-danger-text-focus: var(--color-sf-primary-text-color);
225
+ --color-sf-danger-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
226
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
227
+ --color-sf-danger-text-disabled: var(--color-sf-primary-text-disabled);
228
+ --color-sf-danger-bg-color-selected: #6e0811;
229
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
230
+ --color-sf-danger-text-selected: var(--color-sf-primary-text-color);
231
+
232
+ //Outline button
233
+ --color-sf-primary-outline: var(--color-sf-primary);
234
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
235
+ --color-sf-warning-outline: var(--color-sf-warning-border-color);
236
+ --color-sf-danger-outline: var(--color-sf-danger-border-color);
237
+ --color-sf-success-outline: var(--color-sf-success-border-color);
238
+ --color-sf-info-outline: var(--color-sf-info-border-color);
239
+
240
+ // Tooltip
241
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
242
+ --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
243
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
244
+
245
+ //Toast-text
246
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
247
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
248
+
249
+ //appbar
250
+ //Light
251
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
252
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
253
+ --color-sf-appbar-border-color-alt1: var(--color-sf-content-bg-color-alt2);
254
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
255
+
256
+ //dark
257
+ --color-sf-appbar-bg-color-alt2: #141414;
258
+ --color-sf-appbar-color-alt2: var(--color-sf-content-bg-color-alt1);
259
+ --color-sf-appbar-border-color-alt2: #141414;
260
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
261
+
262
+ //diagram Palette color
263
+ --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt1);
264
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
265
+ --color-sf-diagram-palette-selected-background: var(--color-sf-content-bg-color-selected);
266
+
267
+ //rating
268
+ --color-sf-rating-selected-color: var(--color-sf-content-text-color);
269
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
270
+ --color-sf-rating-selected-disabled-color: #b3b3b3;
271
+ --color-sf-rating-unrated-disabled-color: #b3b3b3;
272
+ --color-sf-rating-selected-hover-color: #115ea3;
273
+ --color-sf-rating-unrated-hover-color: #0f6cbd;
274
+ --color-sf-rating-pressed-color: #0f548c;
275
+
276
+ //Message component
277
+
278
+ //Message default
279
+ --color-sf-msg-color: var(--color-sf-content-text-color);
280
+ --color-sf-msg-bg-color: #f5f5f5;
281
+ --color-sf-msg-border-color: #d1d1d1;
282
+ --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
283
+ --color-sf-msg-bg-color-alt1: transparent;
284
+ --color-sf-msg-border-color-alt1: #d1d1d1;
285
+ --color-sf-msg-color-alt2: #fff;
286
+ --color-sf-msg-bg-color-alt2: #616161;
287
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
288
+ --color-sf-msg-icon-color: var(--color-sf-msg-bg-color-alt2);
289
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-icon-color);
290
+ --color-sf-msg-icon-color-alt2: #fff;
291
+ --color-sf-msg-close-icon-color: var(--color-sf-content-text-color-alt1);
292
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-close-icon-color);
293
+ --color-sf-msg-close-icon-color-alt2: #fff;
294
+
295
+ //Message success
296
+ --color-sf-msg-success-color: var(--color-sf-content-text-color);
297
+ --color-sf-msg-success-bg-color: #f1faf1;
298
+ --color-sf-msg-success-border-color: #9fd89f;
299
+ --color-sf-msg-success-color-alt1: var(--color-sf-content-text-color);
300
+ --color-sf-msg-success-bg-color-alt1: transparent;
301
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
302
+ --color-sf-msg-success-color-alt2: #fff;
303
+ --color-sf-msg-success-bg-color-alt2: #107c10;
304
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
305
+ --color-sf-msg-success-icon-color: #0e700e;
306
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-icon-color);
307
+ --color-sf-msg-success-icon-color-alt2: #fff;
308
+ --color-sf-msg-success-close-icon-color: var(--color-sf-content-text-color-alt1);
309
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-close-icon-color-alt1);
310
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
311
+
312
+ //Message danger
313
+ --color-sf-msg-danger-color: var(--color-sf-content-text-color);
314
+ --color-sf-msg-danger-bg-color: #fdf3f4;
315
+ --color-sf-msg-danger-border-color: #eeacb2;
316
+ --color-sf-msg-danger-color-alt1: var(--color-sf-content-text-color);
317
+ --color-sf-msg-danger-bg-color-alt1: transparent;
318
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
319
+ --color-sf-msg-danger-color-alt2: #fff;
320
+ --color-sf-msg-danger-bg-color-alt2: #c50f1f;
321
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
322
+ --color-sf-msg-danger-icon-color: #b10e1c;
323
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-icon-color);
324
+ --color-sf-msg-danger-icon-color-alt2: #fff;
325
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-content-text-color-alt1);
326
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-close-icon-color-alt1);
327
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
328
+
329
+ //Message Info
330
+ --color-sf-msg-info-color: var(--color-sf-content-text-color);
331
+ --color-sf-msg-info-bg-color: #f2fafc;
332
+ --color-sf-msg-info-border-color: #a4deeb;
333
+ --color-sf-msg-info-color-alt1: var(--color-sf-content-text-color);
334
+ --color-sf-msg-info-bg-color-alt1: transparent;
335
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
336
+ --color-sf-msg-info-color-alt2: #fff;
337
+ --color-sf-msg-info-bg-color-alt2: #0099bc;
338
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
339
+ --color-sf-msg-info-icon-color: #008aa9;
340
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-icon-color);
341
+ --color-sf-msg-info-icon-color-alt2: #fff;
342
+ --color-sf-msg-info-close-icon-color: var(--color-sf-content-text-color-alt1);
343
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-close-icon-color-alt1);
344
+ --color-sf-msg-info-close-icon-color-alt2: #fff;
345
+
346
+ //Message Warning
347
+ --color-sf-msg-warning-color: var(--color-sf-content-text-color);
348
+ --color-sf-msg-warning-bg-color: #fdf6f3;
349
+ --color-sf-msg-warning-border-color: #f4bfab;
350
+ --color-sf-msg-warning-color-alt1: var(--color-sf-content-text-color);
351
+ --color-sf-msg-warning-bg-color-alt1: transparent;
352
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
353
+ --color-sf-msg-warning-color-alt2: #fff;
354
+ --color-sf-msg-warning-bg-color-alt2: #da3b01;
355
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
356
+ --color-sf-msg-warning-icon-color: #c43501;
357
+ --color-sf-msg-warning-icon-color-alt1: --color-sf-msg-warning-icon-color;
358
+ --color-sf-msg-warning-icon-color-alt2: #fff;
359
+ --color-sf-msg-warning-close-icon-color: --color-sf-content-text-color-alt1;
360
+ --color-sf-msg-warning-close-icon-color-alt1: --color-sf-msg-warning-close-icon-color-alt1;
361
+ --color-sf-msg-warning-close-icon-color-alt2: #fff;
362
+
363
+ //extra variables
364
+ --color-sf-utility-primary-lighter: #{#f9f5ff};
365
+ --color-sf-utility-success-lighter: #{#aaefc6};
366
+ --color-sf-utility-info-lighter: #{#b9e6fe};
367
+ --color-sf-utility-warning-lighter: #{#fede88};
368
+ --color-sf-utility-danger-lighter: #{#fecdc9};
369
+ --color-sf-fg-white: #{#fff};
370
+
371
+ //shadow color
372
+ --color-sf-shadow-color: #{#000};
373
+ }
374
+
375
+ // backgroundcolor
376
+ $content-bg-color: mapcolorvariable('content-bg-color') !default;
377
+ $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
378
+ $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
379
+ $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
380
+ $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
381
+ $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
382
+ $content-bg-color-alt6: mapcolorvariable('content-bg-color-alt6') !default;
383
+ $content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
384
+ $content-bg-color-pressed: mapcolorvariable('content-bg-pressed') !default;
385
+ $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
386
+ $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
387
+ $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
388
+ $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
389
+ $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
390
+ $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
391
+ $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
392
+ $flyout-bg-color-selected: mapcolorvariable('flyout-bg-color-selected') !default;
393
+ $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
394
+ $overlay-bg-color: mapcolorvariable('overlay-bg-color');
395
+ $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
396
+ $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
397
+ $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
398
+
399
+ // text-color
400
+ $content-text-color: mapcolorvariable('content-text-color') !default;
401
+ $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
402
+ $content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
403
+ $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
404
+ $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
405
+ $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
406
+ $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
407
+ $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
408
+ $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
409
+ $content-text-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
410
+ $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
411
+ $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
412
+ $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
413
+ $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
414
+ $flyout-text-color-selected: mapcolorvariable('flyout-text-color-selected') !default;
415
+ $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
416
+ $flyout-text-color-disabled: mapcolorvariable('flyout-text-color-disabled') !default;
417
+ $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
418
+ $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
419
+ $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
420
+
421
+ // icon-color
422
+ $icon-color: mapcolorvariable('icon-color') !default;
423
+ $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
424
+ $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
425
+ $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
426
+
427
+ // border-color
428
+ $border-light: mapcolorvariable('border-light') !default;
429
+ $border: mapcolorvariable('border') !default;
430
+ $border-alt: mapcolorvariable('border-alt') !default;
431
+ $border-dark: mapcolorvariable('border-dark') !default;
432
+ $border-hover: mapcolorvariable('border-hover') !default;
433
+ $border-pressed: mapcolorvariable('border-pressed') !default;
434
+ $border-focus: mapcolorvariable('border-focus') !default;
435
+ $border-selected: mapcolorvariable('border-selected') !default;
436
+ $border-dragged:mapcolorvariable('border-dragged') !default;
437
+ $border-disabled: mapcolorvariable('border-disabled') !default;
438
+ $border-warning: mapcolorvariable('border-warning') !default;
439
+ $border-error: mapcolorvariable('border-error') !default;
440
+ $border-success: mapcolorvariable('border-success') !default;
441
+ $border-info: mapcolorvariable('border-info') !default;
442
+ $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
443
+ $flyout-border: mapcolorvariable('flyout-border') !default;
444
+
445
+ //sf Variables
446
+ $primary: mapcolorvariable('primary') !default;
447
+ $primary-text-color: mapcolorvariable('primary-text-color') !default;
448
+ $primary-light: mapcolorvariable('primary-light') !default;
449
+ $primary-lighter: mapcolorvariable('primary-lighter') !default;
450
+ $primary-dark: mapcolorvariable('primary-dark') !default;
451
+ $primary-darker: mapcolorvariable('primary-darker') !default;
452
+ $success: mapcolorvariable('success') !default;
453
+ $info: mapcolorvariable('info') !default;
454
+ $warning: mapcolorvariable('warning') !default;
455
+ $danger: mapcolorvariable('danger') !default;
456
+ $success-light: mapcolorvariable('success-light') !default;
457
+ $info-light: mapcolorvariable('info-light') !default;
458
+ $warning-light: mapcolorvariable('warning-light') !default;
459
+ $danger-light: mapcolorvariable('danger-light') !default;
460
+ $success-dark: mapcolorvariable('success-dark') !default;
461
+ $info-dark: mapcolorvariable('info-dark') !default;
462
+ $warning-dark: mapcolorvariable('warning-dark') !default;
463
+ $danger-dark: mapcolorvariable('danger-dark') !default;
464
+ $success-light-alt: mapcolorvariable('success-light-alt') !default;
465
+ $info-light-alt: mapcolorvariable('info-light-alt') !default;
466
+ $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
467
+ $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
468
+ $badge-warning: mapcolorvariable('badge-warning') !default;
469
+ $badge-warning-text: mapcolorvariable('badge-warning-text') !default;
470
+ $primary-label-color: mapcolorvariable('primary-label-color') !default;
471
+ $primary-cell-selection : mapcolorvariable('primary-cell-selection') !default;
472
+
473
+ // Primary-button
474
+
475
+ $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
476
+ $primary-border-color: mapcolorvariable('primary-border-color') !default;
477
+ $primary-text: mapcolorvariable('primary-text') !default;
478
+ $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
479
+ $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
480
+ $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
481
+ $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
482
+ $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
483
+ $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
484
+ $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
485
+ $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
486
+ $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
487
+ $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
488
+ $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
489
+ $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
490
+ $primary-bg-color-selected: mapcolorvariable('primary-bg-color-selected') !default;
491
+ $primary-border-color-selected: mapcolorvariable('primary-border-color-selected') !default;
492
+ $primary-text-selected: mapcolorvariable('primary-text-selected') !default;
493
+
494
+ // Secondary-button
495
+
496
+ $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
497
+ $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
498
+ $secondary-text: mapcolorvariable('secondary-text-color') !default;
499
+ $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
500
+ $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
501
+ $secondary-text-hover: mapcolorvariable('secondary-text-color-hover') !default;
502
+ $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
503
+ $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
504
+ $secondary-text-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
505
+ $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
506
+ $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
507
+ $secondary-text-focus: mapcolorvariable('secondary-text-color-focus') !default;
508
+ $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
509
+ $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
510
+ $secondary-text-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
511
+ $secondary-bg-color-selected: mapcolorvariable('secondary-bg-color-selected') !default;
512
+ $secondary-border-color-selected: mapcolorvariable('secondary-border-color-selected') !default;
513
+ $secondary-text-selected: mapcolorvariable('secondary-text-color-selected') !default;
514
+
515
+ // Success-button
516
+
517
+ $success-bg-color: mapcolorvariable('success-bg-color') !default;
518
+ $success-border-color: mapcolorvariable('success-border-color') !default;
519
+ $success-text: mapcolorvariable('success-text') !default;
520
+ $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
521
+ $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
522
+ $success-text-hover: mapcolorvariable('success-text-hover') !default;
523
+ $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
524
+ $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
525
+ $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
526
+ $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
527
+ $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
528
+ $success-text-focus: mapcolorvariable('success-text-focus') !default;
529
+ $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
530
+ $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
531
+ $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
532
+ $success-bg-color-selected: mapcolorvariable('success-bg-color-selected') !default;
533
+ $success-border-color-selected: mapcolorvariable('success-border-color-selected') !default;
534
+ $success-text-selected: mapcolorvariable('success-text-selected') !default;
535
+
536
+ // Warning-button
537
+
538
+ $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
539
+ $warning-border-color: mapcolorvariable('warning-border-color') !default;
540
+ $warning-text: mapcolorvariable('warning-text') !default;
541
+ $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
542
+ $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
543
+ $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
544
+ $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
545
+ $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
546
+ $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
547
+ $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
548
+ $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
549
+ $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
550
+ $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
551
+ $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
552
+ $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
553
+ $warning-bg-color-selected: mapcolorvariable('warning-bg-color-selected') !default;
554
+ $warning-border-color-selected: mapcolorvariable('warning-border-color-selected') !default;
555
+ $warning-text-selected: mapcolorvariable('warning-text-selected') !default;
556
+
557
+ // Info-button
558
+
559
+ $info-bg-color: mapcolorvariable('info-bg-color') !default;
560
+ $info-border-color: mapcolorvariable('info-border-color') !default;
561
+ $info-text: mapcolorvariable('info-text') !default;
562
+ $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
563
+ $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
564
+ $info-text-hover: mapcolorvariable('info-text-hover') !default;
565
+ $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
566
+ $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
567
+ $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
568
+ $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
569
+ $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
570
+ $info-text-focus: mapcolorvariable('info-text-focus') !default;
571
+ $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
572
+ $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
573
+ $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
574
+ $info-bg-color-selected: mapcolorvariable('info-bg-color-selected') !default;
575
+ $info-border-color-selected: mapcolorvariable('info-border-color-selected') !default;
576
+ $info-text-selected: mapcolorvariable('info-text-selected') !default;
577
+
578
+ // danger-button
579
+
580
+ $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
581
+ $danger-border-color: mapcolorvariable('danger-border-color') !default;
582
+ $danger-text: mapcolorvariable('danger-text') !default;
583
+ $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
584
+ $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
585
+ $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
586
+ $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
587
+ $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
588
+ $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
589
+ $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
590
+ $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
591
+ $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
592
+ $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
593
+ $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
594
+ $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
595
+ $danger-bg-color-selected: mapcolorvariable('danger-bg-color-selected') !default;
596
+ $danger-border-color-selected: mapcolorvariable('danger-border-color-selected') !default;
597
+ $danger-text-selected: mapcolorvariable('danger-text-selected') !default;
598
+
599
+ //Outline button
600
+
601
+ $primary-outline: mapcolorvariable('primary-outline') !default;
602
+ $secondary-outline: mapcolorvariable('secondary-outline') !default;
603
+ $warning-outline: mapcolorvariable('warning-outline') !default;
604
+ $danger-outline: mapcolorvariable('danger-outline') !default;
605
+ $success-outline: mapcolorvariable('success-outline') !default;
606
+ $info-outline: mapcolorvariable('info-outline') !default;
607
+
608
+ // Tooltip
609
+
610
+ $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
611
+ $tooltip-border: mapcolorvariable('tooltip-border') !default;
612
+ $toooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
613
+
614
+ //Toast-text
615
+
616
+ $toast-text-color: mapcolorvariable('toast-text-color') !default;
617
+ $toast-alt-text-color:mapcolorvariable('toase-alt-text-color') !default;
618
+
619
+ //appbar
620
+ //Light
621
+ $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
622
+ $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
623
+ $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
624
+ $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
625
+
626
+ //dark
627
+ $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
628
+ $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
629
+ $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
630
+ $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
631
+
632
+ //diagram Palette color
633
+ $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
634
+ $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
635
+ $diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;
636
+
637
+ //rating
638
+ $rating-selected-color:mapcolorvariable('diagram-palette-background') !default;
639
+ $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
640
+ $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
641
+ $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
642
+ $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color:') !default;
643
+ $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
644
+ $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
645
+
646
+ //Message component
647
+
648
+ //Message default
649
+ $msg-color: mapcolorvariable('msg-color') !default;
650
+ $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
651
+ $msg-border-color:mapcolorvariable('msg-border-color') !default;
652
+ $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
653
+ $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
654
+ $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
655
+ $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
656
+ $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
657
+ $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
658
+ $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
659
+ $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
660
+ $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
661
+
662
+ $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
663
+ $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
664
+ $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2:') !default;
665
+
666
+ //Message success
667
+ $msg-success-color: mapcolorvariable('msg-success-color') !default;
668
+ $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
669
+ $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
670
+ $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
671
+ $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
672
+ $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
673
+ $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
674
+ $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
675
+ $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
676
+
677
+ $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
678
+ $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
679
+ $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
680
+
681
+ $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
682
+ $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
683
+ $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
684
+
685
+ //Message danger
686
+ $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
687
+ $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
688
+ $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
689
+ $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
690
+ $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
691
+ $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
692
+ $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
693
+ $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
694
+ $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
695
+
696
+ $msg-danger-icon-color: mapcolorvariable('$msg-danger-icon-color') !default;
697
+ $msg-danger-icon-color-alt1: mapcolorvariable('$msg-danger-icon-color-alt1') !default;
698
+ $msg-danger-icon-color-alt2: mapcolorvariable('$msg-danger-icon-color-alt2') !default;
699
+
700
+ $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
701
+ $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
702
+ $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
703
+
704
+ //Message Info
705
+ $msg-info-color: mapcolorvariable('msg-info-color') !default;
706
+ $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
707
+ $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
708
+ $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
709
+ $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
710
+ $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
711
+ $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
712
+ $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
713
+ $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
714
+
715
+ $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
716
+ $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
717
+ $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
718
+
719
+ $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
720
+ $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
721
+ $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
722
+
723
+ //Message Warning
724
+ $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
725
+ $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
726
+ $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
727
+ $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
728
+ $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
729
+ $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
730
+ $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
731
+ $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2:') !default;
732
+ $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2:') !default;
733
+
734
+ $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
735
+ $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
736
+ $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
737
+
738
+ $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
739
+ $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
740
+ $msg-warning-close-icon-color-alt2: mapcolorvariable('$msg-warning-close-icon-color-alt2') !default;
741
+
742
+ $utility-primary-lighter: mapcolorvariable('utility-primary-lighter');
743
+ $utility-success-lighter: mapcolorvariable('utility-success-lighter');
744
+ $utility-info-lighter: mapcolorvariable('utility-info-lighter');
745
+ $utility-warning-lighter: mapcolorvariable('utility-warning-lighter');
746
+ $utility-danger-lighter: mapcolorvariable('utility-danger-lighter');
747
+
748
+ $brand-primary: mapcolorvariable('brand-primary');
749
+ $brand-primary-d10: mapcolorvariable('brand-primary-d10');
750
+ $fg-white: mapcolorvariable('fg-white');
751
+ $fg-senary: mapcolorvariable('fg-senary');
752
+ $shadow-color: mapcolorvariable('shadow-color') !default;
753
+
754
+ // black
755
+ $black:#000 !default;
756
+
757
+ // White
758
+ $white:#fff !default;
759
+
760
+ // Transparent
761
+ $transparent: transparent;
762
+
763
+ //grey color
764
+ $grey-black: #000000;
765
+ $grey-2: #050505;
766
+ $grey-4: #0a0a0a;
767
+ $grey-6: #0f0f0f;
768
+ $grey-8: #141414;
769
+ $grey-10: #1a1a1a;
770
+ $grey-12: #1f1f1f;
771
+ $grey-14: #242424;
772
+ $grey-16: #292929;
773
+ $grey-18: #2e2e2e;
774
+ $grey-20: #333333;
775
+ $grey-22: #383838;
776
+ $grey-24: #3d3d3d;
777
+ $grey-26: #424242;
778
+ $grey-28: #474747;
779
+ $grey-30: #4d4d4d;
780
+ $grey-32: #525252;
781
+ $grey-34: #575757;
782
+ $grey-36: #5c5c5c;
783
+ $grey-38: #616161;
784
+ $grey-40: #666666;
785
+ $grey-42: #6b6b6b;
786
+ $grey-44: #707070;
787
+ $grey-46: #757575;
788
+ $grey-48: #7a7a7a;
789
+ $grey-50: #808080;
790
+ $grey-52: #858585;
791
+ $grey-54: #8a8a8a;
792
+ $grey-56: #8f8f8f;
793
+ $grey-58: #949494;
794
+ $grey-60: #999999;
795
+ $grey-62: #9e9e9e;
796
+ $grey-64: #a3a3a3;
797
+ $grey-66: #a8a8a8;
798
+ $grey-68: #adadad;
799
+ $grey-70: #b3b3b3;
800
+ $grey-72: #b8b8b8;
801
+ $grey-74: #bdbdbd;
802
+ $grey-76: #c2c2c2;
803
+ $grey-78: #c7c7c7;
804
+ $grey-80: #cccccc;
805
+ $grey-82: #d1d1d1;
806
+ $grey-84: #d6d6d6;
807
+ $grey-86: #dbdbdb;
808
+ $grey-88: #e0e0e0;
809
+ $grey-90: #e6e6e6;
810
+ $grey-92: #ebebeb;
811
+ $grey-94: #f0f0f0;
812
+ $grey-96: #f5f5f5;
813
+ $grey-98: #fafafa;
814
+ $grey-white: #fff;
815
+ $grey-transparent: transparent;
816
+ $shadow-1: var(--grey-white);
817
+ $ambient: #0000001e;
818
+ $ambientlighter: #0000000f;
819
+ $ambientdarker: #00000033;
820
+ $ambientbrand: #0000004c;
821
+ $shadow-2: var(--grey-black);
822
+ $key: #00000023;
823
+ $keylighter: #00000011;
824
+ $keydarker: #0000003d;
825
+ $keybrand: #0000003f;
826
+
827
+ //success
828
+ $success-shade-50: #031403;
829
+ $success-shade-40: #052505;
830
+ $success-shade-30: #094509;
831
+ $success-shade-20: #0c5e0c;
832
+ $success-shade-10: #0e700e;
833
+ $success-primary: #107c10;
834
+ $success-tint-10: #218c21;
835
+ $success-tint-20: #359b35;
836
+ $success-tint-30: #54b054;
837
+ $success-tint-40: #9fd89f;
838
+ $success-tint-50: #c9eac9;
839
+ $success-tint-60: #f1faf1;
840
+
841
+ //info
842
+ $info-shade-50: #00181e;
843
+ $info-shade-40: #002e38;
844
+ $info-shade-30: #005669;
845
+ $info-shade-20: #00748f;
846
+ $info-shade-10: #008aa9;
847
+ $info-primary: #0099bc;
848
+ $info-tint-10: #18a4c4;
849
+ $info-tint-20: #31afcc;
850
+ $info-tint-30: #56bfd7;
851
+ $info-tint-40: #a4deeb;
852
+ $info-tint-50: #cdedf4;
853
+ $info-tint-60: #f2fafc;
854
+
855
+ //warning
856
+ $warning-shade-50: #271002;
857
+ $warning-shade-40: #4a1e04;
858
+ $warning-shade-30: #8a3707;
859
+ $warning-shade-20: #bc4b09;
860
+ $warning-shade-10: #de590b;
861
+ $warning-primary: #f7630c;
862
+ $warning-tint-10: #f87528;
863
+ $warning-tint-20: #f98845;
864
+ $warning-tint-30: #faa06b;
865
+ $warning-tint-40: #fdcfb4;
866
+ $warning-tint-50: #fee5d7;
867
+ $warning-tint-60: #fff9f5;
868
+
869
+ //danger
870
+ $danger-shade-50: #200205;
871
+ $danger-shade-40: #3b0509;
872
+ $danger-shade-30: #6e0811;
873
+ $danger-shade-20: #960b18;
874
+ $danger-shade-10: #b10e1c;
875
+ $danger-primary: #c50f1f;
876
+ $danger-tint-10: #cc2635;
877
+ $danger-tint-20: #d33f4c;
878
+ $danger-tint-30: #dc626d;
879
+ $danger-tint-40: #eeacb2;
880
+ $danger-tint-50: #f6d1d5;
881
+ $danger-tint-60: #fdf3f4;
882
+
883
+ //warning
884
+ $warning-dark-shade-50: #230900;
885
+ $warning-dark-shade-40: #411200;
886
+ $warning-dark-shade-30: #7a2101;
887
+ $warning-dark-shade-20: #a62d01;
888
+ $warning-dark-shade-10: #c43501;
889
+ $warning-dark-primary: #da3b01;
890
+ $warning-dark-tint-10: #de501c;
891
+ $warning-dark-tint-20: #e36537;
892
+ $warning-dark-tint-30: #e9835e;
893
+ $warning-dark-tint-40: #f4bfab;
894
+ $warning-dark-tint-50: #f9dcd1;
895
+ $warning-dark-tint-60: #fdf6f3;
896
+
897
+ //brand color
898
+ $brand-10: #061724;
899
+ $brand-20: #082338;
900
+ $brand-30: #0a2e4a;
901
+ $brand-40: #0c3b5e;
902
+ $brand-50: #0e4775;
903
+ $brand-60: #0f548c;
904
+ $brand-70: #115ea3;
905
+ $brand-80: #0f6cbd;
906
+ $brand-90: #2886de;
907
+ $brand-100: #479ef5;
908
+ $brand-110: #62abf5;
909
+ $brand-120: #77b7f7;
910
+ $brand-130: #96c6fa;
911
+ $brand-140: #b4d6fa;
912
+ $brand-150: #cfe4fa;
913
+ $brand-160: #ebf3fc;
914
+
915
+ // Shared
916
+ $red10: #d13438 !default;
917
+ $orange20: #ca5010 !default;
918
+ $green20: #0b6a0b !default;
919
+ $cyan20: #038387 !default;
920
+ $yellow10: #fce100 !default;
921
+ $orangeyellow10: #c19c00 !default;
922
+
923
+ // Primary palette
924
+ $theme-lighter-alt: #eff6fc !default;
925
+ $theme-lighter: #deecf9 !default;
926
+ $theme-light: #c7e0f4 !default;
927
+ $theme-tertiary: #2b88d8 !default;
928
+ $theme-dark-alt: #106ebe !default;
929
+ $theme-dark: #005a9e !default;
930
+ $theme-darker: #004578 !default;
931
+
932
+ //sf Variables
933
+
934
+ $primary: $primary !default;
935
+ $primary-text-color: $primary-text-color !default;
936
+ $primary-light: $primary-light !default;
937
+ $primary-lighter: $primary-lighter !default;
938
+ $primary-dark: $primary-dark !default;
939
+ $primary-darker: $primary-darker !default;
940
+ $success: $success !default;
941
+ $info: $info !default;
942
+ $warning: $warning !default;
943
+ $danger: $danger !default;
944
+ $success-light: $success-light !default;
945
+ $info-light: $info-light !default;
946
+ $warning-light: $warning-light !default;
947
+ $danger-light: $danger-light !default;
948
+ $success-dark: $success-dark !default;
949
+ $info-dark: $info-dark !default;
950
+ $warning-dark: $warning-dark !default;
951
+ $danger-dark: $danger-dark !default;
952
+ $success-light-alt: $success-light-alt !default;
953
+ $info-light-alt: $info-light-alt !default;
954
+ $warning-light-alt: $warning-light-alt !default;
955
+ $danger-light-alt: $danger-light-alt !default;
956
+ $badge-warning: $badge-warning !default;
957
+ $badge-warning-text: $badge-warning-text !default;
958
+ $primary-label-color: $primary-label-color !default;
959
+ $primary-cell-selection : $primary-cell-selection !default;
960
+
961
+ // backgroundcolor
962
+ $content-bg-color: $content-bg-color !default;
963
+ $content-bg-color-alt1: $content-bg-color-alt1 !default;
964
+ $content-bg-color-alt2: $content-bg-color-alt2 !default;
965
+ $content-bg-color-alt3: $content-bg-color-alt3 !default;
966
+ $content-bg-color-alt4: $content-bg-color-alt4 !default;
967
+ $content-bg-color-alt5: $content-bg-color-alt5 !default;
968
+ $content-bg-color-alt6: $content-bg-color-alt6 !default;
969
+ $content-bg-color-hover: $content-bg-color-hover !default;
970
+ $content-bg-color-pressed: $content-bg-color-pressed !default;
971
+ $content-bg-color-focus: $content-bg-color-focus !default;
972
+ $content-bg-color-selected: $content-bg-color-selected !default;
973
+ $content-bg-color-dragged: $content-bg-color-dragged !default;
974
+ $content-bg-color-disabled: $content-bg-color-disabled !default;
975
+ $flyout-bg-color: $flyout-bg-color !default;
976
+ $flyout-bg-color-hover: $flyout-bg-color-hover !default;
977
+ $flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
978
+ $flyout-bg-color-selected: $flyout-bg-color-selected !default;
979
+ $flyout-bg-color-focus: $flyout-bg-color-focus !default;
980
+ $overlay-bg-color: rgba($overlay-bg-color, .4) !default;
981
+ $table-bg-color-hover: $table-bg-color-hover !default;
982
+ $table-bg-color-pressed: $table-bg-color-pressed !default;
983
+ $table-bg-color-selected: $table-bg-color-selected !default;
984
+
985
+ // all theme common color
986
+ $colorpicker-gradient-1: #f00 !default;
987
+ $colorpicker-gradient-2: #ff0 !default;
988
+ $ccolorpicker-gradient-3: #0f0 !default;
989
+ $colorpicker-gradient-4: #0ff !default;
990
+ $colorpicker-gradient-5: #00f !default;
991
+ $colorpicker-gradient-6: #f0f !default;
992
+ $colorpicker-gradient-7: #ff0004 !default;
993
+ $spreadsheet-selection-1: #673ab8;
994
+ $spreadsheet-selection-2: #9c27b0;
995
+ $spreadsheet-selection-3: #029688;
996
+ $spreadsheet-selection-4: #4caf51;
997
+ $spreadsheet-selection-5: #fe9800;
998
+ $spreadsheet-selection-6: #3f52b5;
999
+
1000
+ // text-color
1001
+ $content-text-color: $content-text-color !default;
1002
+ $content-text-color-alt1: $content-text-color-alt1 !default;
1003
+ $content-text-color-alt2: $ccontent-text-color-alt2 !default;
1004
+ $content-text-color-alt3: $content-text-color-alt3 !default;
1005
+ $content-text-color-hover: $content-text-color-hover !default;
1006
+ $content-text-color-pressed: $content-text-color-pressed !default;
1007
+ $content-text-color-focus: $content-text-color-focus !default;
1008
+ $content-text-color-selected: $content-text-color-selected !default;
1009
+ $content-text-color-dragged: $content-text-color-dragged !default;
1010
+ $content-text-color-disabled: $content-bg-color-disabled !default;
1011
+ $placeholder-text-color: $placeholder-text-color !default;
1012
+ $flyout-text-color: $flyout-text-color !default;
1013
+ $flyout-text-color-hover: $flyout-text-color-hover !default;
1014
+ $flyout-text-color-pressed: $flyout-text-color-pressed !default;
1015
+ $flyout-text-color-selected: $flyout-text-color-selected !default;
1016
+ $flyout-text-color-focus: $flyout-text-color-focus !default;
1017
+ $flyout-text-color-disabled: $flyout-text-color-disabled !default;
1018
+ $table-text-color-hover: $table-text-color-hover !default;
1019
+ $table-text-color-pressed: $table-text-color-pressed !default;
1020
+ $table-text-color-selected: $table-text-color-selected !default;
1021
+
1022
+ // icon-color
1023
+ $icon-color: $icon-color !default;
1024
+ $icon-color-hover: $icon-color-hover !default;
1025
+ $icon-color-pressed: $icon-color-pressed !default;
1026
+ $icon-color-disabled: $icon-color-disabled !default;
1027
+
1028
+ // border-color
1029
+ $border-light: $border-light !default;
1030
+ $border: $border !default;
1031
+ $border-alt: $border-alt !default;
1032
+ $border-dark: $border--dark !default;
1033
+ $border-hover: $border-hover !default;
1034
+ $border-pressed: $border-pressed !default;
1035
+ $border-focus: $border-focus !default;
1036
+ $border-selected: $border-selected !default;
1037
+ $border-dragged:$border-dragged !default;
1038
+ $border-disabled: $border-disabled !default;
1039
+ $border-warning: $border-warning !default;
1040
+ $border-error: $border-error !default;
1041
+ $border-success: $border-success !default;
1042
+ $border-info: $border-info !default;
1043
+ $spreadsheet-gridline: $spreadsheet-gridline !default;
1044
+ $flyout-border: $flyout-border !default;
1045
+
1046
+ // Tooltip
1047
+ $tooltip-bg-color: $white !default;
1048
+ $tooltip-border: $white;
1049
+ $toooltip-text-color: $grey-14 !default;
1050
+
1051
+ // shadow
1052
+ $shadow: 0 .8px 16px rgba($black, .15) !default;
1053
+ $shadow-sm: 0 1.6px 3.6px 0 rgba($black, .132), 0 .3px .9px 0 rgba($black, .108) !default;
1054
+ $shadow-md: 0 3.2px 7.2px 0 rgba($black, .132), 0 .6px 1.8px 0 rgba($black, .108) !default;
1055
+ $shadow-lg: 0 6.4px 14.4px 0 rgba($black, .132), 0 1.2px 3.6px 0 rgba($black, .108) !default;
1056
+ $shadow-xl: 0 25.6px 57.6px 0 rgba($black, .22), 0 4.8px 14.4px 0 rgba($black, .18) !default;
1057
+ $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
1058
+ $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
1059
+ $shadow-none: 0 0 rgba($black, 0) !default;
1060
+
1061
+ $shadow-focus-ring1: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1062
+ $shadow-focus-ring2: 0 0 0 1px rgba($black, .95) !default;
1063
+ $primary-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1064
+ $secondary-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1065
+ $success-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1066
+ $danger-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1067
+ $info-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1068
+ $warning-shadow-focus: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $white !default;
1069
+
1070
+ // fontfamily
1071
+ $font-family: 'Segoe UI', -apple-system, blinkMacSystemfont, 'Roboto', 'Helvetica Neue', sans-serif !default;
1072
+
1073
+ // default font Size
1074
+ $text-xxs: 10px !default;
1075
+ $text-xs: 12px !default;
1076
+ $text-sm: 14px !default;
1077
+ $text-base: 16px !default;
1078
+ $text-lg: 18px !default;
1079
+ $text-xl: 20px !default;
1080
+ $text-2xl: 24px !default;
1081
+ $text-3xl: 28px !default;
1082
+ $text-4xl: 32px !default;
1083
+ $text-5xl: 42px !default;
1084
+ $text-6xl: 68px !default;
1085
+ $text-7xl: 78px !default;
1086
+ $text-8xl: 96px !default;
1087
+ $text-9xl: 128px !default;
1088
+
1089
+ // heading
1090
+ $h1-font-size: 40px !default;
1091
+ $h2-font-size: 32px !default;
1092
+ $h3-font-size: 28px !default;
1093
+ $h4-font-size: $text-2xl !default;
1094
+ $h5-font-size: $text-xl !default;
1095
+ $h6-font-size: $text-base !default;
1096
+
1097
+ // display
1098
+
1099
+ // Line height
1100
+ $leading-none: 1 !default;
1101
+ $leading-tight: 1.25 !default;
1102
+ $leading-snug: 1.375 !default;
1103
+ $leading-normal: 1.5 !default;
1104
+ $leading-relaxed: 1.625 !default;
1105
+ $leading-loose: 2 !default;
1106
+
1107
+ // font Weight
1108
+ $font-weight-lighter: lighter !default;
1109
+ $font-weight-light: 300 !default;
1110
+ $font-weight-normal: 400 !default;
1111
+ $font-weight-medium: 600 !default;
1112
+ $font-weight-bold: 700 !default;
1113
+ $font-weight-bolder: bolder !default;
1114
+ $font-weight-semibold: 700 !default;
1115
+
1116
+ // Secondary-button
1117
+ $secondary-bg-color: $secondary-bg-color !default;
1118
+ $secondary-border-color: $secondary-border-color !default;
1119
+ $secondary-text-color: $secondary-text !default;
1120
+ $secondary-bg-color-hover: $secondary-bg-color-hover !default;
1121
+ $secondary-border-color-hover: $secondary-border-color-hover !default;
1122
+ $secondary-text-color-hover: $secondary-text-hover !default;
1123
+ $secondary-bg-color-pressed: $secondary-bg-color-pressed !default;
1124
+ $secondary-border-color-pressed: $secondary-border-color-pressed !default;
1125
+ $secondary-text-color-pressed: $secondary-text-pressed !default;
1126
+ $secondary-bg-color-focus: $secondary-bg-color-focus !default;
1127
+ $secondary-border-color-focus: $secondary-border-color-focus !default;
1128
+ $secondary-text-color-focus: $secondary-text-focus !default;
1129
+ $secondary-bg-color-disabled: $secondary-bg-color-disabled !default;
1130
+ $secondary-border-color-disabled: $secondary-border-color-disabled !default;
1131
+ $secondary-text-color-disabled: $secondary-text-disabled !default;
1132
+ $secondary-bg-color-selected: $secondary-bg-color-selected !default;
1133
+ $secondary-border-color-selected: $secondary-border-color-selected !default;
1134
+ $secondary-text-color-selected: $secondary-text-selected !default;
1135
+
1136
+ // Primary-button
1137
+ $primary-bg-color: $primary-bg-color !default;
1138
+ $primary-border-color: $primary-border-color !default;
1139
+ $primary-text: $primary-text !default;
1140
+ $primary-bg-color-hover: $primary-bg-color-hover !default;
1141
+ $primary-border-color-hover: $primary-border-color-hover !default;
1142
+ $primary-text-hover: $primary-text-hover !default;
1143
+ $primary-bg-color-pressed: $primary-bg-color-pressed !default;
1144
+ $primary-border-color-pressed: $primary-border-color-pressed !default;
1145
+ $primary-text-pressed: $primary-text-pressed !default;
1146
+ $primary-bg-color-focus: $primary-bg-color-focus !default;
1147
+ $primary-border-color-focus: $primary-border-color-focus !default;
1148
+ $primary-text-focus: $primary-text-focus !default;
1149
+ $primary-bg-color-disabled: $primary-bg-color-disabled !default;
1150
+ $primary-border-color-disabled: $primary-border-color-disabled !default;
1151
+ $primary-text-disabled: $primary-text-disabled !default;
1152
+ $primary-bg-color-selected: $primary-bg-color-selected !default;
1153
+ $primary-border-color-selected: $primary-border-color-selected !default;
1154
+ $primary-text-selected: $primary-text-selected !default;
1155
+
1156
+ // Success-button
1157
+ $success-bg-color: $success-bg-color !default;
1158
+ $success-border-color: $success-border-color !default;
1159
+ $success-text: $success-text !default;
1160
+ $success-bg-color-hover: $success-bg-color-hover !default;
1161
+ $success-border-color-hover: $success-border-color-hover !default;
1162
+ $success-text-hover: $success-text-hover !default;
1163
+ $success-bg-color-pressed: $success-bg-color-pressed !default;
1164
+ $success-border-color-pressed: $success-border-color-pressed !default;
1165
+ $success-text-pressed: $success-text-pressed !default;
1166
+ $success-bg-color-focus: $success-bg-color-focus !default;
1167
+ $success-border-color-focus: $success-border-color-focus !default;
1168
+ $success-text-focus: $success-text-focus !default;
1169
+ $success-bg-color-disabled: $success-bg-color-disabled !default;
1170
+ $success-border-color-disabled: $success-border-color-disabled !default;
1171
+ $success-text-disabled: $success-text-disabled !default;
1172
+ $success-bg-color-selected: $success-bg-color-selected !default;
1173
+ $success-border-color-selected: $success-border-color-selected !default;
1174
+ $success-text-selected: $success-text-selected !default;
1175
+
1176
+ // Warning-button
1177
+ $warning-bg-color: $warning-bg-color !default;
1178
+ $warning-border-color: $warning-border-color !default;
1179
+ $warning-text: $warning-text !default;
1180
+ $warning-bg-color-hover: $warning-bg-color-hover !default;
1181
+ $warning-border-color-hover: $warning-border-color-hover !default;
1182
+ $warning-text-hover: $warning-text-hover !default;
1183
+ $warning-bg-color-pressed: $warning-bg-color-pressed !default;
1184
+ $warning-border-color-pressed: $warning-border-color-pressed !default;
1185
+ $warning-text-pressed: $warning-text-pressed !default;
1186
+ $warning-bg-color-focus: $warning-bg-color-focus !default;
1187
+ $warning-border-color-focus: $warning-border-color-focus !default;
1188
+ $warning-text-focus: $warning-text-focus !default;
1189
+ $warning-bg-color-disabled: $warning-bg-color-disabled !default;
1190
+ $warning-border-color-disabled: $warning-border-color-disabled !default;
1191
+ $warning-text-disabled: $warning-text-disabled !default;
1192
+ $warning-bg-color-selected: $warning-bg-color-selected !default;
1193
+ $warning-border-color-selected: $warning-border-color-selected !default;
1194
+ $warning-text-selected: $warning-text-selected !default;
1195
+
1196
+ // danger-button
1197
+ $danger-bg-color: $danger-bg-color !default;
1198
+ $danger-border-color: $danger-border-color !default;
1199
+ $danger-text: $danger-text !default;
1200
+ $danger-bg-color-hover: $danger-bg-color-hover !default;
1201
+ $danger-border-color-hover: $danger-border-color-hover !default;
1202
+ $danger-text-hover: $danger-text-hover !default;
1203
+ $danger-bg-color-pressed: $danger-bg-color-pressed !default;
1204
+ $danger-border-color-pressed: $danger-border-color-pressed !default;
1205
+ $danger-text-pressed: $danger-text-pressed !default;
1206
+ $danger-bg-color-focus: $danger-bg-color-focus !default;
1207
+ $danger-border-color-focus: $danger-border-color-focus !default;
1208
+ $danger-text-focus: $danger-text-focus !default;
1209
+ $danger-bg-color-disabled: $danger-bg-color-disabled !default;
1210
+ $danger-border-color-disabled: $danger-border-color-disabled !default;
1211
+ $danger-text-disabled: $danger-text-disabled !default;
1212
+ $danger-bg-color-selected: $danger-bg-color-selected !default;
1213
+ $danger-border-color-selected: $danger-border-color-selected !default;
1214
+ $danger-text-selected: $danger-text-selected !default;
1215
+
1216
+ // Info-button
1217
+ $info-bg-color: $info-bg-color !default;
1218
+ $info-border-color: $info-border-color !default;
1219
+ $info-text: $info-text !default;
1220
+ $info-bg-color-hover: $info-bg-color-hover !default;
1221
+ $info-border-color-hover: $info-border-color-hover !default;
1222
+ $info-text-hover: $info-text-hover !default;
1223
+ $info-bg-color-pressed: $info-bg-color-pressed !default;
1224
+ $info-border-color-pressed: $info-border-color-pressed !default;
1225
+ $info-text-pressed: $info-text-pressed !default;
1226
+ $info-bg-color-focus: $info-bg-color-focus !default;
1227
+ $info-border-color-focus: $info-border-color-focus !default;
1228
+ $info-text-focus: $info-text-focus !default;
1229
+ $info-bg-color-disabled: $info-bg-color-disabled !default;
1230
+ $info-border-color-disabled: $info-border-color-disabled !default;
1231
+ $info-text-disabled: $info-text-disabled !default;
1232
+ $info-bg-color-selected: $info-bg-color-selected !default;
1233
+ $info-border-color-selected: $info-border-color-selected !default;
1234
+ $info-text-selected: $info-text-selected !default;
1235
+
1236
+ //Outline button
1237
+ $primary-outline: $primary-outline !default;
1238
+ $secondary-outline: $secondary-outline !default;
1239
+ $warning-outline: $warning-outline !default;
1240
+ $danger-outline: $danger-outline !default;
1241
+ $success-outline: $success-outline !default;
1242
+ $info-outline: $info-outline !default;
1243
+
1244
+ //Toast-text
1245
+ $toast-text-color: $toast-text-color !default;
1246
+ $toast-alt-text-color: $toast-alt-text-color !default;
1247
+
1248
+ // chart series
1249
+
1250
+ $series-1: #000;
1251
+ $series-2: #000;
1252
+ $series-3: #000;
1253
+ $series-4: #000;
1254
+ $series-5: #614570;
1255
+ $series-6: #4c6fb1;
1256
+ $series-7: #cc6952;
1257
+ $series-8: #3f579a;
1258
+ $series-9: #4ea09b;
1259
+ $series-10: #6e7a89;
1260
+ $series-11: #3d75a6;
1261
+ $series-12: #f3a93c;
1262
+ $skin-name: 'fluent2' !default;
1263
+ $theme-name: 'fluent2' !default;
1264
+
1265
+ //diagram Palette color
1266
+ $diagram-palette-background: $diagram-palette-background !default;
1267
+ $diagram-palette-hover-background: $diagram-palette-hover-background !default;
1268
+ $diagram-palette-selected-background: $diagram-palette-selected-background !default;
1269
+
1270
+ //b5 variables
1271
+ $gray-900: #212529 !default;
1272
+
1273
+ //border-radius
1274
+ $inputs-radius: 2px !default;
1275
+ $flyout-radius: $inputs-radius !default;
1276
+ $model-radius: $inputs-radius !default;
1277
+ $inputs-radius-bigger: $inputs-radius !default;
1278
+ $flyout-radius-bigger: $inputs-radius !default;
1279
+ $model-radius-bigger: $inputs-radius !default;
1280
+ $inputs-radius-small: $inputs-radius !default;
1281
+ $flyout-radius-small: $inputs-radius !default;
1282
+ $model-radius-small: $inputs-radius !default;
1283
+
1284
+ //Message component
1285
+
1286
+ //Message default
1287
+ $msg-color: $msg-color !default;
1288
+ $msg-bg-color: $msg-bg-color !default;
1289
+ $msg-border-color:$msg-border-color !default;
1290
+ $msg-color-alt1: $msg-color-alt1 !default;
1291
+ $msg-bg-color-alt1: $msg-bg-color-alt1 !default;
1292
+ $msg-border-color-alt1: $msg-border-color-alt1 !default;
1293
+ $msg-color-alt2: $msg-color-alt2 !default;
1294
+ $msg-bg-color-alt2: $msg-bg-color-alt2 !default;
1295
+ $msg-border-color-alt2: $msg-border-color-alt2 !default;
1296
+ $msg-icon-color: $msg-icon-color !default;
1297
+ $msg-icon-color-alt1: $msg-icon-color-alt1 !default;
1298
+ $msg-icon-color-alt2: $msg-icon-color-alt2 !default;
1299
+
1300
+ $msg-close-icon-color: $msg-close-icon-color !default;
1301
+ $msg-close-icon-color-alt1: $msg-close-icon-color-alt1 !default;
1302
+ $msg-close-icon-color-alt2: $msg-close-icon-color-alt2 !default;
1303
+
1304
+ //Message success
1305
+ $msg-success-color: $msg-success-color !default;
1306
+ $msg-success-bg-color: $msg-success-bg-color !default;
1307
+ $msg-success-border-color: $msg-success-border-color !default;
1308
+ $msg-success-color-alt1: $msg-success-color-alt1 !default;
1309
+ $msg-success-bg-color-alt1: $msg-success-bg-color-alt1 !default;
1310
+ $msg-success-border-color-alt1: $msg-success-border-color-alt1 !default;
1311
+ $msg-success-color-alt2: $msg-success-color-alt2 !default;
1312
+ $msg-success-bg-color-alt2: $msg-success-bg-color-alt2 !default;
1313
+ $msg-success-border-color-alt2: $msg-success-border-color-alt2 !default;
1314
+
1315
+ $msg-success-icon-color: $msg-success-icon-color !default;
1316
+ $msg-success-icon-color-alt1:$msg-success-icon-color-alt1 !default;
1317
+ $msg-success-icon-color-alt2: $msg-success-icon-color-alt2 !default;
1318
+
1319
+ $msg-success-close-icon-color: $msg-success-close-icon-color !default;
1320
+ $msg-success-close-icon-color-alt1: $msg-success-close-icon-color-alt1 !default;
1321
+ $msg-success-close-icon-color-alt2: $msg-success-close-icon-color-alt2 !default;
1322
+
1323
+ //Message danger
1324
+ $msg-danger-color: $msg-danger-color !default;
1325
+ $msg-danger-bg-color: $msg-danger-bg-color !default;
1326
+ $msg-danger-border-color: $msg-danger-border-color !default;
1327
+ $msg-danger-color-alt1: $msg-danger-color-alt1 !default;
1328
+ $msg-danger-bg-color-alt1: $msg-danger-bg-color-alt1 !default;
1329
+ $msg-danger-border-color-alt1: $msg-danger-border-color-alt1 !default;
1330
+ $msg-danger-color-alt2: $msg-danger-color-alt2 !default;
1331
+ $msg-danger-bg-color-alt2: $msg-danger-bg-color-alt2 !default;
1332
+ $msg-danger-border-color-alt2: $msg-danger-border-color-alt2 !default;
1333
+
1334
+ $msg-danger-icon-color: $msg-danger-icon-color !default;
1335
+ $msg-danger-icon-color-alt1: $msg-danger-icon-color-alt1 !default;
1336
+ $msg-danger-icon-color-alt2: $msg-danger-icon-color-alt2 !default;
1337
+
1338
+ $msg-danger-close-icon-color: $msg-danger-close-icon-color !default;
1339
+ $msg-danger-close-icon-color-alt1: $msg-danger-close-icon-color-alt1 !default;
1340
+ $msg-danger-close-icon-color-alt2: $msg-danger-close-icon-color-alt2 !default;
1341
+
1342
+ //Message Info
1343
+ $msg-info-color: $msg-info-color !default;
1344
+ $msg-info-bg-color: $msg-info-bg-color !default;
1345
+ $msg-info-border-color: $msg-info-border-color !default;
1346
+ $msg-info-color-alt1: $msg-info-color-alt1 !default;
1347
+ $msg-info-bg-color-alt1: $msg-info-bg-color-alt1 !default;
1348
+ $msg-info-border-color-alt1: $msg-info-border-color-alt1 !default;
1349
+ $msg-info-color-alt2: $msg-info-color-alt2 !default;
1350
+ $msg-info-bg-color-alt2: $msg-info-bg-color-alt2 !default;
1351
+ $msg-info-border-color-alt2: $msg-info-border-color-alt2 !default;
1352
+
1353
+ $msg-info-icon-color: $msg-info-icon-color !default;
1354
+ $msg-info-icon-color-alt1: $msg-info-icon-color-alt1 !default;
1355
+ $msg-info-icon-color-alt2:$msg-info-icon-color-alt2 !default;
1356
+
1357
+ $msg-info-close-icon-color: $msg-info-close-icon-color !default;
1358
+ $msg-info-close-icon-color-alt1: $msg-info-close-icon-color-alt1 !default;
1359
+ $msg-info-close-icon-color-alt2: $msg-info-close-icon-color-alt2 !default;
1360
+
1361
+ //Message Warning
1362
+ $msg-warning-color: $msg-warning-color !default;
1363
+ $msg-warning-bg-color: $msg-warning-bg-color !default;
1364
+ $msg-warning-border-color: $msg-warning-border-color !default;
1365
+ $msg-warning-color-alt1: $msg-warning-color-alt1 !default;
1366
+ $msg-warning-bg-color-alt1: $msg-warning-bg-color-alt1 !default;
1367
+ $msg-warning-border-color-alt1: $msg-warning-border-color-alt1 !default;
1368
+ $msg-warning-color-alt2: $msg-warning-color-alt2 !default;
1369
+ $msg-warning-bg-color-alt2: $msg-warning-bg-color-alt2 !default;
1370
+ $msg-warning-border-color-alt2: $msg-warning-border-color-alt2 !default;
1371
+
1372
+ $msg-warning-icon-color: $msg-warning-icon-color !default;
1373
+ $msg-warning-icon-color-alt1: $msg-warning-icon-color-alt1 !default;
1374
+ $msg-warning-icon-color-alt2: $msg-warning-icon-color-alt2 !default;
1375
+
1376
+ $msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
1377
+ $msg-warning-close-icon-color-alt1: $msg-warning-close-icon-color-alt1 !default;
1378
+ $msg-warning-close-icon-color-alt2: $msg-warning-close-icon-color-alt2 !default;
1379
+
1380
+ //appbar
1381
+ //Light
1382
+ $appbar-bg-color-alt1: $appbar-bg-color-alt1 !default;
1383
+ $appbar-color-alt1:$appbar-color-alt1 !default;
1384
+ $appbar-border-color-alt1: $appbar-border-color-alt1 !default;
1385
+ $appbar-hover-bg-color-alt1: $appbar-hover-bg-color-alt1 !default;
1386
+
1387
+ //dark
1388
+ $appbar-bg-color-alt2: $appbar-bg-color-alt2 !default;
1389
+ $appbar-color-alt2: $appbar-color-alt2 !default;
1390
+ $appbar-border-color-alt2: $appbar-border-color-alt2 !default;
1391
+ $appbar-hover-bg-color-alt2: $appbar-hover-bg-color-alt2 !default;
1392
+
1393
+ //shadow
1394
+ $appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
1395
+ $appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;
1396
+
1397
+ //rating
1398
+ $rating-selected-color: $rating-selected-color !default;
1399
+ $rating-unrated-color: $rating-unrated-color !default;
1400
+ $rating-selected-disabled-color: $rating-selected-disabled-color !default;
1401
+ $rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
1402
+ $rating-selected-hover-color: $rating-selected-hover-color !default;
1403
+ $rating-unrated-hover-color: $rating-unrated-hover-color !default;
1404
+ $rating-pressed-color: $rating-pressed-color !default;
1405
+
1406
+ //font-icons
1407
+ $font-icon-8: 8px !default;
1408
+ $font-icon-9: 9px !default;
1409
+ $font-icon-10: 10px !default;
1410
+ $font-icon-12: 12px !default;
1411
+ $font-icon-13: 13px !default;
1412
+ $font-icon-14: 14px !default;
1413
+ $font-icon-15: 15px !default;
1414
+ $font-icon-16: 16px !default;
1415
+ $font-icon-17: 17px !default;
1416
+ $font-icon-18: 18px !default;
1417
+ $font-icon-20: 20px !default;
1418
+ $font-icon-22: 22px !default;
1419
+ $font-icon-24: 24px !default;
1420
+ $font-icon-26: 26px !default;
1421
+ $font-icon-28: 28px !default;
1422
+ $font-icon-32: 32px !default;
1423
+
1424
+ $font-size: 12px !default;
1425
+ $font-weight: 400 !default;
1426
+ $error-font-color: $danger !default;
1427
+ $warning-font-color: $orange20 !default;
1428
+ $success-font-color: $green20 !default;
1429
+ $information-font-color: $white !default;
1430
+
1431
+ $primary-alt: #000 !default;
1432
+ $primary-lighter: $utility-primary-lighter !default;
1433
+ $success-lighter: $utility-success-lighter !default;
1434
+ $info-lighter: $utility-info-lighter !default;
1435
+ $warning-lighter: $utility-warning-lighter !default;
1436
+ $danger-lighter: $utility-danger-lighter !default;
1437
+ $primary-brand_alt: #fff !default;
1438
+
1439
+ //gray
1440
+ $gray-25: #fcfcfd;
1441
+ $gray-50: #f9fafb;
1442
+ $gray-100: #f2f4f7;
1443
+ $gray-200: #eaecf0;
1444
+ $gray-300: #d0d5dd;
1445
+ $gray-400: #98a1b2;
1446
+ $gray-500: #667085;
1447
+ $gray-600: #475467;
1448
+ $gray-700: #344054;
1449
+ $gray-800: #18212f;
1450
+ $gray-900: #101828;
1451
+ $gray-950: #0c111d;
1452
+
1453
+ //cool-gray-color-variables
1454
+ $cool-gray-25: $gray-25 !default;
1455
+ $cool-gray-50: $gray-50 !default;
1456
+ $cool-gray-100: $gray-100 !default;
1457
+ $cool-gray-200: $gray-200 !default;
1458
+ $cool-gray-300: $gray-300 !default;
1459
+ $cool-gray-400: $gray-400 !default;
1460
+ $cool-gray-500: $gray-500 !default;
1461
+ $cool-gray-600: $gray-600 !default;
1462
+ $cool-gray-700: $gray-700 !default;
1463
+ $cool-gray-800: $gray-800 !default;
1464
+ $cool-gray-900: $gray-900 !default;
1465
+
1466
+ //badge
1467
+ $badge-primary-ghost-border-color:$brand-primary !default;
1468
+ $badge-primary-ghost-text-color: $brand-primary !default;
1469
+ $badge-success-ghost-border-color:$success-lighter !default;
1470
+ $badge-success-ghost-text-color: $success !default;
1471
+ $badge-danger-ghost-border-color:$danger-lighter !default;
1472
+ $badge-danger-ghost-text-color: $danger !default;
1473
+ $badge-warning-ghost-border-color:$warning-lighter !default;
1474
+ $badge-warning-ghost-text-color: $warning !default;
1475
+ $badge-info-ghost-border-color:$info-lighter !default;
1476
+ $badge-info-ghost-text-color: $info !default;
1477
+
1478
+ //Switch
1479
+ $switch-off-handle-bg-color:$fg-white !default;
1480
+
1481
+ //chip
1482
+ $chip-secondary-active-bg-color: $fg-senary !default;
1483
+ $chip-secondary-active-border-color: $fg-senary !default;
1484
+
1485
+ $gantt-connected-task-color: $brand-primary-d10 !default;
1486
+ $gantt-active-parent-task-color: $brand-primary-d10 !default;
1487
+
1488
+ //border-radius
1489
+ $btn-border-radius:4px !default;
1490
+ $btn-border-radius:4px !default;
1491
+
1492
+ .e-dark-mode{
1493
+ // backgroundcolor
1494
+ --color-sf-black: #000;
1495
+ --color-sf-white: #fff;
1496
+ --color-sf-content-bg-color: #1f1f1f;
1497
+ --color-sf-content-bg-color-alt1: #292929;
1498
+ --color-sf-content-bg-color-alt2: #141414;
1499
+ --color-sf-content-bg-color-alt3: #333333;
1500
+ --color-sf-content-bg-color-alt4: #0a0a0a;
1501
+ --color-sf-content-bg-color-alt5: #000000;
1502
+ --color-sf-content-bg-color-alt6: #050505;
1503
+ --color-sf-content-bg-color-hover: var(--color-sf-content-bg-color-alt3);
1504
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
1505
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
1506
+ --color-sf-content-bg-color-selected: #2e2e2e;
1507
+ --color-sf-content-bg-color-dragged: #082338;
1508
+ --color-sf-content-bg-color-disabled: transparent;
1509
+ --color-sf-flyout-bg-color: var(--color-sf-content-bg-color-alt1);
1510
+ --color-sf-flyout-bg-color-hover: #3d3d3d;
1511
+ --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
1512
+ --color-sf-flyout-bg-color-selected: #383838;
1513
+ --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
1514
+ --color-sf-overlay-bg-color: rgba($black, .4);
1515
+ --color-sf-table-bg-color-hover: #383838;
1516
+ --color-sf-table-bg-color-pressed: #2e2e2e;
1517
+ --color-sf-table-bg-color-selected: #082338;
1518
+
1519
+ // text-color
1520
+ --color-sf-content-text-color: #fff;
1521
+ --color-sf-content-text-color-alt1: #d6d6d6;
1522
+ --color-sf-content-text-color-alt2: #adadad;
1523
+ --color-sf-content-text-color-alt3: #999999;
1524
+ --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
1525
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
1526
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-colo);
1527
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color);
1528
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
1529
+ --color-sf-content-text-color-disabled: #5c5c5c;
1530
+ --color-sf-placeholder-text-color: var(--color-sf-content-text-color-alt3);
1531
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
1532
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
1533
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color);
1534
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color);
1535
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
1536
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
1537
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
1538
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
1539
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
1540
+
1541
+ // icon-color
1542
+ --color-sf-icon-color: #d6d6d6;
1543
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color);
1544
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color);
1545
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
1546
+
1547
+ // border-color
1548
+ --color-sf-border-light: #525252;
1549
+ --color-sf-border: #666666;
1550
+ --color-sf-border-alt: #adadad;
1551
+ --color-sf-border-dark: #757575;
1552
+ --color-sf-border-hover: #757575;
1553
+ --color-sf-border-pressed: #4d4d4d;
1554
+ --color-sf-border-focus: var(--color-sf-border);
1555
+ --color-sf-border-selected: #6b6b6b;
1556
+ --color-sf-border-dragged: var(--color-sf-primary);
1557
+ --color-sf-border-disabled: #424242;
1558
+ --color-sf-border-warning: #bc4b09;
1559
+ --color-sf-border-error: #dc626d;
1560
+ --color-sf-border-success: #9fd89f;
1561
+ --color-sf-border-info: #18a4c4;
1562
+ --color-sf-spreadsheet-gridline: #e6e6e6;
1563
+ --color-sf-flyout-border: #525252;
1564
+
1565
+ //sf Variables
1566
+ --color-sf-primary: #115ea3;
1567
+ --color-sf-primary-text-color: #fff;
1568
+ --color-sf-primary-light: #0e4775;
1569
+ --color-sf-primary-lighter: #082338;
1570
+ --color-sf-primary-dark: #62abf5;
1571
+ --color-sf-primary-darker: #96c6fa;
1572
+ --color-sf-success: #107c10;
1573
+ --color-sf-info: #0099bc;
1574
+ --color-sf-warning: #faa06b;
1575
+ --color-sf-danger: #dc626d;
1576
+ --color-sf-success-light: #094509;
1577
+ --color-sf-info-light: #005669;
1578
+ --color-sf-warning-light: #4a1e04;
1579
+ --color-sf-danger-light: #6e0811;
1580
+ --color-sf-success-dark: #c9eac9;
1581
+ --color-sf-info-dark: #cdedf4;
1582
+ --color-sf-warning-dark: #fee5d7;
1583
+ --color-sf-danger-dark: #fee5d7;
1584
+ --color-sf-success-light-alt: #052505;
1585
+ --color-sf-info-light-alt: #002e38;
1586
+ --color-sf-warning-light-alt: #4a1e04;
1587
+ --color-sf-danger-light-alt: #3b0509;
1588
+ --color-sf-badge-warning: #fde300;
1589
+ --color-sf-badge-warning-text: #fde300;
1590
+ --color-sf-primary-label-color: #479ef5;
1591
+ --color-sf-primary-cell-selection: #ebf3fc;
1592
+
1593
+ // Primary-button
1594
+ --color-sf-primary-bg-color: var(--color-sf-primary);
1595
+ --color-sf-primary-border-color: var(--color-sf-primary);
1596
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
1597
+ --color-sf-primary-bg-color-hover: #0f6cbd;
1598
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color-hover);
1599
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
1600
+ --color-sf-primary-bg-color-pressed: #0c3b5e;
1601
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color-pressed);
1602
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
1603
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
1604
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color-focus);
1605
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-color);
1606
+ --color-sf-primary-bg-color-disabled: #141414;
1607
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
1608
+ --color-sf-primary-text-disabled: var(--color-sf-content-text-color-disabled);
1609
+ --color-sf-primary-bg-color-selected: #0f548c;
1610
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color-selected);
1611
+ --color-sf-primary-text-selected: var(--color-sf-primary-text-color);
1612
+
1613
+ // Secondary-button
1614
+ --color-sf-secondary-bg-color: #292929;
1615
+ --color-sf-secondary-border-color: var(--color-sf-border);
1616
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
1617
+ --color-sf-secondary-bg-color-hover: #3d3d3d;
1618
+ --color-sf-secondary-border-color-hover: #757575;
1619
+ --color-sf-secondary-text-color-hover: var(--color-sf-content-text-color);
1620
+ --color-sf-secondary-bg-color-pressed: var(--color-sf-black);
1621
+ --color-sf-secondary-border-color-pressed: #6b6b6b;
1622
+ --color-sf-secondary-text-color-pressed: var(--color-sf-content-text-color);
1623
+ --color-sf-secondary-bg-color-focus: #383838;
1624
+ --color-sf-secondary-border-color-focus: #fff;
1625
+ --color-sf-secondary-text-color-focus: var(--color-sf-content-text-color);
1626
+ --color-sf-secondary-bg-color-disabled: -var(-color-sf-primary-bg-color-disabled);
1627
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
1628
+ --color-sf-secondary-text-color-disabled: var(--color-sf-content-text-color-disabled);
1629
+ --color-sf-secondary-bg-color-selected: #383838;
1630
+ --color-sf-secondary-border-color-selected: #707070;
1631
+ --color-sf-secondary-text-color-selected: var(--color-sf-content-text-color);
1632
+
1633
+ // Success-button
1634
+ --color-sf-success-bg-color: #218c21;
1635
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
1636
+ --color-sf-success-text: var(--color-sf-primary-text-color);
1637
+ --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
1638
+ --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
1639
+ --color-sf-success-text-hover: var(--color-sf-primary-text-color);
1640
+ --color-sf-success-bg-color-pressed: #052505;
1641
+ --color-sf-success-border-color-pressed: var(--color-sf-success-bg-color-pressed);
1642
+ --color-sf-success-text-pressed: var(--color-sf-primary-text-color);
1643
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
1644
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
1645
+ --color-sf-success-text-focus: var(--color-sf-primary-text-color);
1646
+ --color-sf-success-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
1647
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
1648
+ --color-sf-success-text-disabled: var(--color-sf-primary-text-disabled);
1649
+ --color-sf-success-bg-color-selected: #094509;
1650
+ --color-sf-success-border-color-selected: var(--color-sf-success-bg-color-selected);
1651
+ --color-sf-success-text-selected: var(--color-sf-primary-text-color);
1652
+
1653
+ // Warning-button
1654
+ --color-sf-warning-bg-color: #f87528;
1655
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
1656
+ --color-sf-warning-text: #242424;
1657
+ --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
1658
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
1659
+ --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
1660
+ --color-sf-warning-bg-color-pressed: #4a1e04;
1661
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-bg-color-pressed);
1662
+ --color-sf-warning-text-pressed: var(--color-sf-primary-text-color);
1663
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
1664
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
1665
+ --color-sf-warning-text-focus: var(--color-sf-primary-text-color);
1666
+ --color-sf-warning-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
1667
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
1668
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
1669
+ --color-sf-warning-bg-color-selected: #8a3707;
1670
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
1671
+ --color-sf-warning-text-selected: var(--color-sf-primary-text-color);
1672
+
1673
+ // Info-button
1674
+ --color-sf-info-bg-color: #18a4c4;
1675
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
1676
+ --color-sf-info-text: #242424;
1677
+ --color-sf-info-bg-color-hover: var(--color-sf-info-bg-color);
1678
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
1679
+ --color-sf-info-text-hover: var(--color-sf-primary-text-color);
1680
+ --color-sf-info-bg-color-pressed: #002e38;
1681
+ --color-sf-info-border-color-pressed: var(--color-sf-info-bg-color-pressed);
1682
+ --color-sf-info-text-pressed: var(--color-sf-primary-text-color);
1683
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
1684
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
1685
+ --color-sf-info-text-focus: var(--color-sf-primary-text-color);
1686
+ --color-sf-info-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
1687
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
1688
+ --color-sf-info-text-disabled: var(--color-sf-primary-text-disabled);
1689
+ --color-sf-info-bg-color-selected: #005669;
1690
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
1691
+ --color-sf-info-text-selected: var(--color-sf-primary-text-color);
1692
+
1693
+ // danger-button
1694
+ --color-sf-danger-bg-color: #cc2635;
1695
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
1696
+ --color-sf-danger-text: var(--color-sf-primary-text-color);
1697
+ --color-sf-danger-bg-color-hover: var(--color-sf-danger-bg-color);
1698
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
1699
+ --color-sf-danger-text-hover: var(--color-sf-primary-text-color);
1700
+ --color-sf-danger-bg-color-pressed: #3b0509;
1701
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
1702
+ --color-sf-danger-text-pressed: var(--color-sf-primary-text-color);
1703
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
1704
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
1705
+ --color-sf-danger-text-focus: var(--color-sf-primary-text-color);
1706
+ --color-sf-danger-bg-color-disabled: var(--color-sf-primary-bg-color-disabled);
1707
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
1708
+ --color-sf-danger-text-disabled: var(--color-sf-primary-text-disabled);
1709
+ --color-sf-danger-bg-color-selected: #6e0811;
1710
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
1711
+ --color-sf-danger-text-selected: var(--color-sf-primary-text-color);
1712
+
1713
+ //Outline button
1714
+ --color-sf-primary-outline: var(--color-sf-primary);
1715
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
1716
+ --color-sf-warning-outline: #f7630c;
1717
+ --color-sf-danger-outline: #c50f1f;
1718
+ --color-sf-success-outline: #107c10;
1719
+ --color-sf-info-outline: #0099bc;
1720
+
1721
+ // Tooltip
1722
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
1723
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
1724
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
1725
+
1726
+ //Toast-text
1727
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
1728
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
1729
+
1730
+ //appbar
1731
+ //Light
1732
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
1733
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
1734
+ --color-sf-appbar-border-color-alt1: var(--color-sf-content-bg-color-alt2);
1735
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
1736
+
1737
+ //dark
1738
+ --color-sf-appbar-bg-color-alt2: #f5f5f5;
1739
+ --color-sf-appbar-color-alt2: #242424;
1740
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
1741
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
1742
+
1743
+ //diagram Palette color
1744
+ --color-sf-diagram-palette-background: #e0e0e0;
1745
+ --color-sf-diagram-palette-hover-background: #bdbdbd;
1746
+ --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
1747
+
1748
+ //rating
1749
+ --color-sf-rating-selected-color: var(--color-sf-content-text-color);
1750
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
1751
+ --color-sf-rating-selected-disabled-color: #575757;
1752
+ --color-sf-rating-unrated-disabled-color: #4d4d4d;
1753
+ --color-sf-rating-selected-hover-color: #2886de;
1754
+ --color-sf-rating-unrated-hover-color: #115ea3;
1755
+ --color-sf-rating-pressed-color: #479ef5;
1756
+
1757
+ //Message component
1758
+
1759
+ //Message default
1760
+ --color-sf-msg-color: var(--color-sf-content-text-color);
1761
+ --color-sf-msg-bg-color: var(--color-sf-content-bg-color-alt2);
1762
+ --color-sf-msg-border-color: var(--color-sf-border);
1763
+ --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
1764
+ --color-sf-msg-bg-color-alt1: transparent;
1765
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-bg-color);
1766
+ --color-sf-msg-color-alt2: #242424;
1767
+ --color-sf-msg-bg-color-alt2: #adadad;
1768
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
1769
+ --color-sf-msg-icon-color: var(--color-sf-msg-bg-color-alt2);
1770
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-icon-color);
1771
+ --color-sf-msg-icon-color-alt2: #fff;
1772
+ --color-sf-msg-close-icon-color: var(--color-sf-content-text-color-alt1);
1773
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-close-icon-color);
1774
+ --color-sf-msg-close-icon-color-alt2: #fff;
1775
+
1776
+ //Message success
1777
+ --color-sf-msg-success-color: var(--color-sf-content-text-color);
1778
+ --color-sf-msg-success-bg-color: #052505;
1779
+ --color-sf-msg-success-border-color: #107c10;
1780
+ --color-sf-msg-success-color-alt1: var(--color-sf-content-text-color);
1781
+ --color-sf-msg-success-bg-color-alt1: transparent;
1782
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-color);
1783
+ --color-sf-msg-success-color-alt2: #fff;
1784
+ --color-sf-msg-success-bg-color-alt2: #107c10;
1785
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
1786
+ --color-sf-msg-success-icon-color: #54b054;
1787
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-icon-color);
1788
+ --color-sf-msg-success-icon-color-alt2: #fff;
1789
+ --color-sf-msg-success-close-icon-color: var(--color-sf-content-text-color-alt1);
1790
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-close-icon-color-alt1);
1791
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
1792
+
1793
+ //Message danger
1794
+ --color-sf-msg-danger-color: var(--color-sf-content-text-color);
1795
+ --color-sf-msg-danger-bg-color: #3b0509;
1796
+ --color-sf-msg-danger-border-color: #c50f1f;
1797
+ --color-sf-msg-danger-color-alt1: var(--color-sf-content-text-color);
1798
+ --color-sf-msg-danger-bg-color-alt1: transparent;
1799
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
1800
+ --color-sf-msg-danger-color-alt2: #fff;
1801
+ --color-sf-msg-danger-bg-color-alt2: #c50f1f;
1802
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
1803
+ --color-sf-msg-danger-icon-color: #dc626d;
1804
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-icon-color);
1805
+ --color-sf-msg-danger-icon-color-alt2: #fff;
1806
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-content-text-color-alt1);
1807
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-close-icon-color-alt1);
1808
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
1809
+
1810
+ //Message Info
1811
+ --color-sf-msg-info-color: var(--color-sf-content-text-color);
1812
+ --color-sf-msg-info-bg-color: #002e38;
1813
+ --color-sf-msg-info-border-color: #0099bc;
1814
+ --color-sf-msg-info-color-alt1: var(--color-sf-content-text-color);
1815
+ --color-sf-msg-info-bg-color-alt1: transparent;
1816
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
1817
+ --color-sf-msg-info-color-alt2: #fff;
1818
+ --color-sf-msg-info-bg-color-alt2: #0099bc;
1819
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
1820
+ --color-sf-msg-info-icon-color: #56bfd7;
1821
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-icon-color);
1822
+ --color-sf-msg-info-icon-color-alt2: #fff;
1823
+ --color-sf-msg-info-close-icon-color: var(--color-sf-content-text-color-alt1);
1824
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-close-icon-color-alt1);
1825
+ --color-sf-msg-info-close-icon-color-alt2: #fff;
1826
+
1827
+ //Message Warning
1828
+ --color-sf-msg-warning-color: var(--color-sf-content-text-color);
1829
+ --color-sf-msg-warning-bg-color: #411200;
1830
+ --color-sf-msg-warning-border-color: #da3b01;
1831
+ --color-sf-msg-warning-color-alt1: var(--color-sf-content-text-color);
1832
+ --color-sf-msg-warning-bg-color-alt1: transparent;
1833
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
1834
+ --color-sf-msg-warning-color-alt2: #fff;
1835
+ --color-sf-msg-warning-bg-color-alt2: #da3b01;
1836
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
1837
+ --color-sf-msg-warning-icon-color: #e9835e;
1838
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-icon-color);
1839
+ --color-sf-msg-warning-icon-color-alt2: #fff;
1840
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-content-text-color-alt1);
1841
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-close-icon-color-alt1);
1842
+ --color-sf-msg-warning-close-icon-color-alt2: #fff;
1843
+ --color-sf-shadow-color: #{#fff};
1844
+ }
1845
+
1846
+ .e-high-contrast{
1847
+ // backgroundcolor
1848
+ --color-sf-black: #000;
1849
+ --color-sf-white: #fff;
1850
+ --color-sf-content-bg-color: #000;
1851
+ --color-sf-content-bg-color-alt1: var(--color-sf-black);
1852
+ --color-sf-content-bg-color-alt2: var(--color-sf-black);
1853
+ --color-sf-content-bg-color-alt3: var(--color-sf-black);
1854
+ --color-sf-content-bg-color-alt4: var(--color-sf-black);
1855
+ --color-sf-content-bg-color-alt5: var(--color-sf-black);
1856
+ --color-sf-content-bg-color-alt6: var(--color-sf-black);
1857
+ --color-sf-content-bg-color-hover: #1aebff;
1858
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-hover);
1859
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
1860
+ --color-sf-content-bg-color-selected: var(--color-sf-content-bg-color-hover);
1861
+ --color-sf-content-bg-color-dragged: var(--color-sf-black);
1862
+ --color-sf-content-bg-color-disabled: #3ff23f;
1863
+ --color-sf-flyout-bg-color: var(--color-sf-black);
1864
+ --color-sf-flyout-bg-color-hover: var(--color-sf-content-bg-color-hover);
1865
+ --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
1866
+ --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
1867
+ --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
1868
+ --color-sf-overlay-bg-color: rgba($black, .4);
1869
+ --color-sf-table-bg-color-hover: var(--color-sf-black);
1870
+ --color-sf-table-bg-color-pressed: var(--color-sf-black);
1871
+ --color-sf-table-bg-color-selected: var(--color-sf-black);
1872
+
1873
+ // text-color
1874
+ --color-sf-content-text-color: #fff;
1875
+ --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
1876
+ --color-sf-content-text-color-alt2: var(--color-sf-content-text-color);
1877
+ --color-sf-content-text-color-alt3: var(--color-sf-content-text-color);
1878
+ --color-sf-content-text-color-hover: #000;
1879
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color-hover);
1880
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-color-hover);
1881
+ --color-sf-content-text-color-selected: var(--color-sf-content-text-color-hover);
1882
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
1883
+ --color-sf-content-text-color-disabled: var(--color-sf-content-bg-color-disabled);
1884
+ --color-sf-placeholder-text-color: var(--color-sf-content-text-color);
1885
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
1886
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color-hover);
1887
+ --color-sf-flyout-text-color-pressed: var(--color-sf-content-text-color-hover);
1888
+ --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
1889
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
1890
+ --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
1891
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
1892
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
1893
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
1894
+
1895
+ // icon-color
1896
+ --color-sf-icon-color: #fff;
1897
+ --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
1898
+ --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
1899
+ --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
1900
+
1901
+ // border-color
1902
+ --color-sf-border-light: #fff;
1903
+ --color-sf-border: var(--color-sf-border-light);
1904
+ --color-sf-border-alt: var(--color-sf-border-light);
1905
+ --color-sf-border-dark: var(--color-sf-border-light);
1906
+ --color-sf-border-hover: #1aebff;
1907
+ --color-sf-border-pressed: var(--color-sf-border-hover);
1908
+ --color-sf-border-focus: var(--color-sf-border-hover);
1909
+ --color-sf-border-selected: var(--color-sf-border-hover);
1910
+ --color-sf-border-dragged: var(--color-sf-border-light);
1911
+ --color-sf-border-disabled: #3ff23f;
1912
+ --color-sf-border-warning: #f7630c;
1913
+ --color-sf-border-error: #c50f1f;
1914
+ --color-sf-border-success: #107c10;
1915
+ --color-sf-border-info: #0099bc;
1916
+ --color-sf-spreadsheet-gridline: var(--color-sf-border-light);
1917
+ --color-sf-flyout-border: var(--color-sf-border-light);
1918
+
1919
+ //sf Variables
1920
+ --color-sf-primary: #1aebff;
1921
+ --color-sf-primary-text-color: #000;
1922
+ --color-sf-primary-light: rgba(26, 235, 255, .8);
1923
+ --color-sf-primary-lighter: var(--color-sf-primary-light);
1924
+ --color-sf-primary-dark: var(--color-sf-primary);
1925
+ --color-sf-primary-darker: var(--color-sf-primary);
1926
+ --color-sf-success: #107c10;
1927
+ --color-sf-info: #0099bc;
1928
+ --color-sf-warning: #f7630c;
1929
+ --color-sf-danger: #c50f1f;
1930
+ --color-sf-success-light: #094509;
1931
+ --color-sf-info-light: #005669;
1932
+ --color-sf-warning-light: #4a1e04;
1933
+ --color-sf-danger-light: #6e0811;
1934
+ --color-sf-success-dark: #c9eac9;
1935
+ --color-sf-info-dark: #cdedf4;
1936
+ --color-sf-warning-dark: #fee5d7;
1937
+ --color-sf-danger-dark: #f6d1d5;
1938
+ --color-sf-success-light-alt: #052505;
1939
+ --color-sf-info-light-alt: #002e38;
1940
+ --color-sf-warning-light-alt: #4a1e04;
1941
+ --color-sf-danger-light-alt: #3b0509;
1942
+ --color-sf-badge-warning: #fde300;
1943
+ --color-sf-badge-warning-text: #fde300;
1944
+ --color-sf-primary-label-color: #1aebff;
1945
+ --color-sf-primary-cell-selection: rgba(26, 235, 255, .28);
1946
+
1947
+ // Primary-button
1948
+ --color-sf-primary-bg-color: #1aebff;
1949
+ --color-sf-primary-border-color: var(--color-sf-primary-bg-color);
1950
+ --color-sf-primary-text: #000;
1951
+ --color-sf-primary-bg-color-hover: var(--color-sf-primary-bg-color);
1952
+ --color-sf-primary-border-color-hover: var(--color-sf-primary-bg-color);
1953
+ --color-sf-primary-text-hover: var(--color-sf-primary-text);
1954
+ --color-sf-primary-bg-color-pressed: var(--color-sf-primary-bg-color);
1955
+ --color-sf-primary-border-color-pressed: var(--color-sf-primary-bg-color);
1956
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text);
1957
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color);
1958
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-bg-color);
1959
+ --color-sf-primary-text-focus: var(--color-sf-primary-text);
1960
+ --color-sf-primary-bg-color-disabled: #000;
1961
+ --color-sf-primary-border-color-disabled: #3ff23f;
1962
+ --color-sf-primary-text-disabled: var(--color-sf-primary-border-color-disabled);
1963
+ --color-sf-primary-bg-color-selected: var(--color-sf-primary-bg-color);
1964
+ --color-sf-primary-border-color-selected: var(--color-sf-primary-bg-color);
1965
+ --color-sf-primary-text-selected: var(--color-sf-primary-text);
1966
+
1967
+ // Secondary-button
1968
+ --color-sf-secondary-bg-color: #000;
1969
+ --color-sf-secondary-border-color: var(--color-sf-border);
1970
+ --color-sf-secondary-text-color: var(--color-sf-content-text-color);
1971
+ --color-sf-secondary-bg-color-hover: #1aebff;
1972
+ --color-sf-secondary-border-color-hover: var(--color-sf-secondary-bg-color-hover);
1973
+ --color-sf-secondary-text-color-hover: #000;
1974
+ --color-sf-secondary-bg-color-pressed: var(--color-sf-secondary-bg-color-hover);
1975
+ --color-sf-secondary-border-color-pressed: var(--color-sf-secondary-border-color-hover);
1976
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color-hover);
1977
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
1978
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
1979
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
1980
+ --color-sf-secondary-bg-color-disabled: #000;
1981
+ --color-sf-secondary-border-color-disabled: #3ff23f;
1982
+ --color-sf-secondary-text-color-disabled: var(--color-sf-secondary-border-color-disabled);
1983
+ --color-sf-secondary-bg-color-selected: var(--color-sf-secondary-bg-color-hover);
1984
+ --color-sf-secondary-border-color-selected: var(--color-sf-secondary-border-color-hover);
1985
+ --color-sf-secondary-text-color-selected: var(--color-sf-secondary-text-color-hover);
1986
+
1987
+ // Success-button
1988
+ --color-sf-success-bg-color: #107c10;
1989
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
1990
+ --color-sf-success-text: #fff;
1991
+ --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
1992
+ --color-sf-success-border-color-hover: var(--color-sf-success-border-color);
1993
+ --color-sf-success-text-hover: var(--color-sf-success-text);
1994
+ --color-sf-success-bg-color-pressed: var(--color-sf-success-bg-color);
1995
+ --color-sf-success-border-color-pressed: var(--color-sf-success-border-color);
1996
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
1997
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color);
1998
+ --color-sf-success-border-color-focus: var(--color-sf-success-border-color);
1999
+ --color-sf-success-text-focus: var(--color-sf-success-text);
2000
+ --color-sf-success-bg-color-disabled: #000;
2001
+ --color-sf-success-border-color-disabled: #3ff23f;
2002
+ --color-sf-success-text-disabled: var(--color-sf-success-border-color-disabled);
2003
+ --color-sf-success-bg-color-selected: var(--color-sf-success-bg-color);
2004
+ --color-sf-success-border-color-selected: var(--color-sf-success-border-color);
2005
+ --color-sf-success-text-selected: var(--color-sf-success-text);
2006
+
2007
+ // Warning-button
2008
+ --color-sf-warning-bg-color: #f7630c;
2009
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
2010
+ --color-sf-warning-text: #000;
2011
+ --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
2012
+ --color-sf-warning-border-color-hover: var(--color-sf-warning-border-color);
2013
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
2014
+ --color-sf-warning-bg-color-pressed: var(--color-sf-warning-bg-color);
2015
+ --color-sf-warning-border-color-pressed: var(--color-sf-warning-border-color);
2016
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
2017
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color);
2018
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
2019
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
2020
+ --color-sf-warning-bg-color-disabled: #000;
2021
+ --color-sf-warning-border-color-disabled: #3ff23f;
2022
+ --color-sf-warning-text-disabled: var(--color-sf-primary-text-disabled);
2023
+ --color-sf-warning-bg-color-selected: var(--color-sf-warning-bg-color);
2024
+ --color-sf-warning-border-color-selected: var(--color-sf-warning-bg-color-selected);
2025
+ --color-sf-warning-text-selected: var(--color-sf-warning-text);
2026
+
2027
+ // Info-button
2028
+ --color-sf-info-bg-color: #0099bc;
2029
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
2030
+ --color-sf-info-text: #000;
2031
+ --color-sf-info-bg-color-hover: var(--color-sf-info-bg-color);
2032
+ --color-sf-info-border-color-hover: var(--color-sf-info-bg-color-hover);
2033
+ --color-sf-info-text-hover: var(--color-sf-info-text);
2034
+ --color-sf-info-bg-color-pressed: var(--color-sf-info-bg-color);
2035
+ --color-sf-info-border-color-pressed: var(--color-sf-info-border-color);
2036
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
2037
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color);
2038
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
2039
+ --color-sf-info-text-focus: var(--color-sf-info-text);
2040
+ --color-sf-info-bg-color-disabled: #000;
2041
+ --color-sf-info-border-color-disabled: #3ff23f;
2042
+ --color-sf-info-text-disabled: var(--color-sf-info-border-color-disabled);
2043
+ --color-sf-info-bg-color-selected: var(--color-sf-info-bg-color);
2044
+ --color-sf-info-border-color-selected: var(--color-sf-info-bg-color-selected);
2045
+ --color-sf-info-text-selected: var(--color-sf-info-text);
2046
+
2047
+ // Danger-button
2048
+ --color-sf-danger-bg-color: #c50f1f;
2049
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
2050
+ --color-sf-danger-text: #fff;
2051
+ --color-sf-danger-bg-color-hover: var(--color-sf-danger-bg-color);
2052
+ --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
2053
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
2054
+ --color-sf-danger-bg-color-pressed: var(--color-sf-danger-bg-color);
2055
+ --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
2056
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
2057
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color);
2058
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
2059
+ --color-sf-danger-text-focus: var(--color-sf-danger-text);
2060
+ --color-sf-danger-bg-color-disabled: #000;
2061
+ --color-sf-danger-border-color-disabled: #3ff23f;
2062
+ --color-sf-danger-text-disabled: var(--color-sf-danger-border-color-disabled);
2063
+ --color-sf-danger-bg-color-selected: var(--color-sf-danger-bg-color);
2064
+ --color-sf-danger-border-color-selected: var(--color-sf-danger-bg-color-selected);
2065
+ --color-sf-danger-text-selected: var(--color-sf-danger-text);
2066
+
2067
+ //Outline button
2068
+ --color-sf-primary-outline: var(--color-sf-primary);
2069
+ --color-sf-secondary-outline: var(--color-sf-secondary-border-color);
2070
+ --color-sf-warning-outline: #f7630c;
2071
+ --color-sf-danger-outline: #c50f1f;
2072
+ --color-sf-success-outline: #107c10;
2073
+ --color-sf-info-outline: #0099bc;
2074
+
2075
+ // Tooltip
2076
+ --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
2077
+ --color-sf-tooltip-border: var(--color-sf-border-light);
2078
+ --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
2079
+
2080
+ //Toast-text
2081
+ --color-sf-toast-text-color: var(--color-sf-content-text-color);
2082
+ --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
2083
+
2084
+ //Appbar
2085
+ //Light
2086
+ --color-sf-appbar-bg-color-alt1: #fff;
2087
+ --color-sf-appbar-color-alt1: #000;
2088
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
2089
+ --color-sf-appbar-hover-bg-color-alt1: var(--color-sf-appbar-bg-color-alt1);//--
2090
+
2091
+ //Dark
2092
+ --color-sf-appbar-bg-color-alt2: var(--color-sf-appbar-color-alt1);
2093
+ --color-sf-appbar-color-alt2: var(--color-sf-appbar-bg-color-alt1);
2094
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt1);
2095
+ --color-sf-appbar-hover-bg-color-alt2: var(--color-sf-appbar-color-alt1);//--
2096
+
2097
+ //Diagram Palette color
2098
+ --color-sf-diagram-palette-background: #000;
2099
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
2100
+ --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
2101
+
2102
+ //rating
2103
+ --color-sf-rating-selected-color: var(--color-sf-content-text-color);
2104
+ --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
2105
+ --color-sf-rating-selected-disabled-color: var(--color-sf-content-text-color-disabled);
2106
+ --color-sf-rating-unrated-disabled-color: var(--color-sf-content-text-color-disabled);
2107
+ --color-sf-rating-selected-hover-color: var(--color-sf-content-bg-color-hover);
2108
+ --color-sf-rating-unrated-hover-color: var(--color-sf-content-bg-color-hover);
2109
+ --color-sf-rating-pressed-color: var(--color-sf-content-bg-color-hover);
2110
+
2111
+ //Message component
2112
+
2113
+ //Message Default
2114
+ --color-sf-msg-color: #fff;
2115
+ --color-sf-msg-bg-color: #000;
2116
+ --color-sf-msg-border-color: var(--color-sf-msg-color);
2117
+ --color-sf-msg-color-alt1: #1aebff;
2118
+ --color-sf-msg-bg-color-alt1: var(--color-sf-msg-bg-color);//--
2119
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-color);
2120
+ --color-sf-msg-color-alt2: var(--color-sf-msg-bg-color);
2121
+ --color-sf-msg-bg-color-alt2: var(--color-sf-msg-color-alt1);
2122
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-color-alt1);
2123
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
2124
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color-alt);
2125
+ --color-sf-msg-icon-color-alt2: var(--color-sf-msg-bg-color);
2126
+ --color-sf-msg-close-icon-color: var(--color-sf-msg-color);
2127
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-msg-color);
2128
+ --color-sf-msg-close-icon-color-alt2: var(--color-sf-msg-bg-color);
2129
+
2130
+ //Message success
2131
+ --color-sf-msg-success-color: #107c10;
2132
+ --color-sf-msg-success-bg-color: #000;
2133
+ --color-sf-msg-success-border-color: var(--color-sf-msg-success-color);
2134
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
2135
+ --color-sf-msg-success-bg-color-alt1: var(--color-sf-msg-success-bg-color);
2136
+ --color-sf-msg-success-border-color-alt1: #fff;
2137
+ --color-sf-msg-success-color-alt2: var(--color-sf-msg-success-bg-color);
2138
+ --color-sf-msg-success-bg-color-alt2: var(--color-sf-msg-success-color);
2139
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-color);
2140
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
2141
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
2142
+ --color-sf-msg-success-icon-color-alt2: var(--color-sf-msg-success-bg-color);
2143
+ --color-sf-msg-success-close-icon-color: var(--color-sf-msg-success-border-color-alt1);
2144
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-msg-success-border-color-alt1);
2145
+ --color-sf-msg-success-close-icon-color-alt2: var(--color-sf-msg-success-bg-color);
2146
+
2147
+ //Message danger
2148
+ --color-sf-msg-danger-color: #c50f1f;
2149
+ --color-sf-msg-danger-bg-color: #000;
2150
+ --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-color);
2151
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
2152
+ --color-sf-msg-danger-bg-color-alt1: var(--color-sf-msg-danger-bg-color);
2153
+ --color-sf-msg-danger-border-color-alt1: #fff;
2154
+ --color-sf-msg-danger-color-alt2: var(--color-sf-msg-danger-bg-color);
2155
+ --color-sf-msg-danger-bg-color-alt2: var(--color-sf-msg-danger-color);
2156
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-color);
2157
+ --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
2158
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
2159
+ --color-sf-msg-danger-icon-color-alt2: var(--color-sf-msg-danger-bg-color);
2160
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-msg-danger-border-color-alt1);
2161
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-msg-danger-border-color-alt1);
2162
+ --color-sf-msg-danger-close-icon-color-alt2: var(--color-sf-msg-danger-bg-color);
2163
+
2164
+ //Message Info
2165
+ --color-sf-msg-info-color: #0099bc;
2166
+ --color-sf-msg-info-bg-color: #000;
2167
+ --color-sf-msg-info-border-color: var(--color-sf-msg-info-color);
2168
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
2169
+ --color-sf-msg-info-bg-color-alt1: var(--color-sf-msg-info-bg-color);//--
2170
+ --color-sf-msg-info-border-color-alt1: #fff;
2171
+ --color-sf-msg-info-color-alt2: var(--color-sf-msg-info-bg-color);
2172
+ --color-sf-msg-info-bg-color-alt2: var(--color-sf-msg-info-color);
2173
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-color);
2174
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
2175
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
2176
+ --color-sf-msg-info-icon-color-alt2: var(--color-sf-msg-info-bg-color);
2177
+ --color-sf-msg-info-close-icon-color: var(--color-sf-msg-info-border-color-alt1);
2178
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-msg-info-border-color-alt1);
2179
+ --color-sf-msg-info-close-icon-color-alt2: var(--color-sf-msg-info-bg-color);
2180
+
2181
+ //Message Warning
2182
+ --color-sf-msg-warning-color: #f7630c;
2183
+ --color-sf-msg-warning-bg-color: #000;
2184
+ --color-sf-msg-warning-border-color: #da3b01;
2185
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
2186
+ --color-sf-msg-warning-bg-color-alt1: var(--color-sf-msg-warning-bg-color);
2187
+ --color-sf-msg-warning-border-color-alt1: #fff;
2188
+ --color-sf-msg-warning-color-alt2: var(--color-sf-msg-warning-bg-color);
2189
+ --color-sf-msg-warning-bg-color-alt2: var(--color-sf-msg-warning-color);
2190
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-color);
2191
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
2192
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
2193
+ --color-sf-msg-warning-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
2194
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-msg-warning-border-color-alt11);
2195
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-border-color-alt11);
2196
+ --color-sf-msg-warning-close-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
2197
+ --color-sf-shadow-color: #fff;
2198
+ }