@syncfusion/ej2-base 25.2.7 → 26.1.35-7502

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 (201) hide show
  1. package/{README.md → ReadMe.md} +100 -100
  2. package/bin/syncfusion-license.js +104 -1
  3. package/dist/ej2-base.min.js +1 -10
  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 +268 -486
  7. package/dist/es6/ej2-base.es2015.js.map +1 -1
  8. package/dist/es6/ej2-base.es5.js +307 -522
  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/undefined +67 -0
  14. package/e2e/crypto.js +16 -16
  15. package/e2e/index.d.ts +27 -27
  16. package/e2e/m.protractor.config.js +286 -286
  17. package/e2e/modified-protractor/protractor.config.js +316 -316
  18. package/e2e/protractor.config.js +389 -389
  19. package/helpers/e2e/index.js +3 -3
  20. package/license +10 -10
  21. package/package.json +225 -161
  22. package/src/ajax.d.ts +1 -1
  23. package/src/ajax.js +3 -7
  24. package/src/animation-model.d.ts +41 -41
  25. package/src/animation.d.ts +1 -1
  26. package/src/animation.js +20 -22
  27. package/src/base.d.ts +2 -1
  28. package/src/base.js +4 -13
  29. package/src/browser.d.ts +1 -1
  30. package/src/browser.js +3 -4
  31. package/src/child-property.d.ts +1 -0
  32. package/src/child-property.js +2 -2
  33. package/src/component-model.d.ts +16 -16
  34. package/src/component.d.ts +4 -0
  35. package/src/component.js +28 -36
  36. package/src/dom.js +4 -11
  37. package/src/draggable-model.d.ts +113 -113
  38. package/src/draggable.js +20 -41
  39. package/src/droppable-model.d.ts +23 -23
  40. package/src/droppable.js +19 -20
  41. package/src/event-handler.js +2 -6
  42. package/src/fetch.js +1 -2
  43. package/src/hijri-parser.js +3 -3
  44. package/src/internationalization.d.ts +4 -0
  45. package/src/internationalization.js +0 -5
  46. package/src/intl/date-formatter.js +19 -33
  47. package/src/intl/date-parser.js +33 -62
  48. package/src/intl/intl-base.d.ts +9 -1
  49. package/src/intl/intl-base.js +19 -18
  50. package/src/intl/number-formatter.js +14 -7
  51. package/src/intl/number-parser.js +2 -6
  52. package/src/intl/parser-base.js +6 -11
  53. package/src/keyboard-model.d.ts +16 -16
  54. package/src/keyboard.js +19 -20
  55. package/src/module-loader.js +1 -0
  56. package/src/notify-property-change.d.ts +0 -20
  57. package/src/notify-property-change.js +16 -55
  58. package/src/observer.js +3 -6
  59. package/src/sanitize-helper.js +0 -1
  60. package/src/template-engine.js +1 -7
  61. package/src/template.js +13 -18
  62. package/src/touch-model.d.ts +39 -39
  63. package/src/touch.js +22 -27
  64. package/src/util.d.ts +4 -4
  65. package/src/util.js +12 -37
  66. package/src/validate-lic.js +4 -3
  67. package/styles/_all.scss +2 -2
  68. package/styles/_bds-dark-definition.scss +16 -15
  69. package/styles/_bds-definition.scss +16 -15
  70. package/styles/_bootstrap-dark-definition.scss +42 -42
  71. package/styles/_bootstrap-definition.scss +42 -42
  72. package/styles/_bootstrap4-definition.scss +11 -11
  73. package/styles/_bootstrap5-dark-definition.scss +9 -9
  74. package/styles/_bootstrap5-definition.scss +8 -8
  75. package/styles/_bootstrap5.3-dark-definition.scss +8 -0
  76. package/styles/_bootstrap5.3-definition.scss +8 -0
  77. package/styles/_fabric-dark-definition.scss +42 -42
  78. package/styles/_fabric-definition.scss +42 -42
  79. package/styles/_fluent-dark-definition.scss +9 -9
  80. package/styles/_fluent-definition.scss +9 -9
  81. package/styles/_fluent2-dark-definition.scss +9 -0
  82. package/styles/_fluent2-definition.scss +9 -0
  83. package/styles/_fluent2-highcontrast-definition.scss +9 -0
  84. package/styles/_fusionnew-dark-definition.scss +8 -8
  85. package/styles/_fusionnew-definition.scss +8 -8
  86. package/styles/_highcontrast-definition.scss +42 -42
  87. package/styles/_highcontrast-light-definition.scss +42 -42
  88. package/styles/_material-dark-definition.scss +49 -48
  89. package/styles/_material-definition.scss +50 -49
  90. package/styles/_material3-dark-definition.scss +15 -14
  91. package/styles/_material3-definition.scss +16 -15
  92. package/styles/_tailwind-dark-definition.scss +16 -15
  93. package/styles/_tailwind-definition.scss +16 -15
  94. package/styles/_tailwind3-dark-definition.scss +15 -0
  95. package/styles/_tailwind3-definition.scss +15 -0
  96. package/styles/animation/_all.scss +535 -560
  97. package/styles/bds-lite.css +3408 -0
  98. package/styles/bds-lite.scss +3 -0
  99. package/styles/bds.css +3408 -0
  100. package/styles/bds.scss +3 -0
  101. package/styles/bootstrap-dark-lite.css +3749 -0
  102. package/styles/bootstrap-dark-lite.scss +3 -0
  103. package/styles/bootstrap-dark.css +1075 -169
  104. package/styles/bootstrap-lite.css +3749 -0
  105. package/styles/bootstrap-lite.scss +3 -0
  106. package/styles/bootstrap.css +1075 -169
  107. package/styles/bootstrap4-lite.css +3390 -0
  108. package/styles/bootstrap4-lite.scss +3 -0
  109. package/styles/bootstrap4.css +1063 -169
  110. package/styles/bootstrap5-dark-lite.css +2966 -0
  111. package/styles/bootstrap5-dark-lite.scss +3 -0
  112. package/styles/bootstrap5-dark.css +1068 -171
  113. package/styles/bootstrap5-lite.css +2966 -0
  114. package/styles/bootstrap5-lite.scss +3 -0
  115. package/styles/bootstrap5.3-lite.css +3559 -0
  116. package/styles/bootstrap5.3-lite.scss +3 -0
  117. package/styles/bootstrap5.3.css +3559 -0
  118. package/styles/bootstrap5.3.scss +3 -0
  119. package/styles/bootstrap5.css +1066 -169
  120. package/styles/common/_all.scss +2 -2
  121. package/styles/common/_core.scss +111 -117
  122. package/styles/common/_mixin.scss +11 -9
  123. package/styles/definition/_bds-dark.scss +1193 -1178
  124. package/styles/definition/_bds.scss +1488 -1458
  125. package/styles/definition/_bootstrap-dark.scss +213 -219
  126. package/styles/definition/_bootstrap.scss +208 -215
  127. package/styles/definition/_bootstrap4.scss +159 -167
  128. package/styles/definition/_bootstrap5-dark.scss +481 -494
  129. package/styles/definition/_bootstrap5.3-dark.scss +1232 -0
  130. package/styles/definition/_bootstrap5.3.scss +1579 -0
  131. package/styles/definition/_bootstrap5.scss +481 -495
  132. package/styles/definition/_fabric-dark.scss +194 -200
  133. package/styles/definition/_fabric.scss +192 -198
  134. package/styles/definition/_fluent-dark.scss +494 -557
  135. package/styles/definition/_fluent.scss +494 -558
  136. package/styles/definition/_fluent2-dark.scss +1523 -0
  137. package/styles/definition/_fluent2-highcontrast.scss +1523 -0
  138. package/styles/definition/_fluent2.scss +2295 -0
  139. package/styles/definition/_fusionnew-dark.scss +330 -362
  140. package/styles/definition/_fusionnew.scss +331 -363
  141. package/styles/definition/_highcontrast-light.scss +189 -193
  142. package/styles/definition/_highcontrast.scss +189 -195
  143. package/styles/definition/_material-dark.scss +193 -198
  144. package/styles/definition/_material.scss +186 -192
  145. package/styles/definition/_material3-dark.scss +660 -710
  146. package/styles/definition/_material3.scss +729 -792
  147. package/styles/definition/_tailwind-dark.scss +445 -488
  148. package/styles/definition/_tailwind.scss +443 -485
  149. package/styles/definition/_tailwind3-dark.scss +1622 -0
  150. package/styles/definition/_tailwind3.scss +2093 -0
  151. package/styles/fabric-dark-lite.css +3734 -0
  152. package/styles/fabric-dark-lite.scss +3 -0
  153. package/styles/fabric-dark.css +1075 -169
  154. package/styles/fabric-lite.css +3734 -0
  155. package/styles/fabric-lite.scss +3 -0
  156. package/styles/fabric.css +1075 -169
  157. package/styles/fluent-dark-lite.css +2966 -0
  158. package/styles/fluent-dark-lite.scss +3 -0
  159. package/styles/fluent-dark.css +1066 -169
  160. package/styles/fluent-lite.css +2966 -0
  161. package/styles/fluent-lite.scss +3 -0
  162. package/styles/fluent.css +1066 -169
  163. package/styles/fluent2-lite.css +4017 -0
  164. package/styles/fluent2-lite.scss +3 -0
  165. package/styles/fluent2.css +4017 -0
  166. package/styles/fluent2.scss +3 -0
  167. package/styles/highcontrast-light-lite.css +3725 -0
  168. package/styles/highcontrast-light-lite.scss +3 -0
  169. package/styles/highcontrast-light.css +1075 -169
  170. package/styles/highcontrast-lite.css +3725 -0
  171. package/styles/highcontrast-lite.scss +3 -0
  172. package/styles/highcontrast.css +1075 -169
  173. package/styles/material-dark-lite.css +3702 -0
  174. package/styles/material-dark-lite.scss +3 -0
  175. package/styles/material-dark.css +1075 -169
  176. package/styles/material-lite.css +3702 -0
  177. package/styles/material-lite.scss +3 -0
  178. package/styles/material.css +1075 -169
  179. package/styles/material3-dark-lite.css +3021 -0
  180. package/styles/material3-dark-lite.scss +3 -0
  181. package/styles/material3-dark.css +1066 -170
  182. package/styles/material3-lite.css +3077 -0
  183. package/styles/material3-lite.scss +3 -0
  184. package/styles/material3.css +1066 -170
  185. package/styles/offline-theme/material-dark.css +1075 -169
  186. package/styles/offline-theme/material.css +1075 -169
  187. package/styles/offline-theme/tailwind-dark.css +1067 -170
  188. package/styles/offline-theme/tailwind.css +1067 -170
  189. package/styles/tailwind-dark-lite.css +2967 -0
  190. package/styles/tailwind-dark-lite.scss +3 -0
  191. package/styles/tailwind-dark.css +1067 -170
  192. package/styles/tailwind-lite.css +2967 -0
  193. package/styles/tailwind-lite.scss +3 -0
  194. package/styles/tailwind.css +1067 -170
  195. package/styles/tailwind3-lite.css +3775 -0
  196. package/styles/tailwind3-lite.scss +3 -0
  197. package/styles/tailwind3.css +3775 -0
  198. package/styles/tailwind3.scss +3 -0
  199. package/.eslintrc.json +0 -260
  200. package/CHANGELOG.md +0 -649
  201. package/tslint.json +0 -111
package/styles/definition/_bootstrap5.3.scss ADDED
@@ -0,0 +1,1579 @@
1
+ @use 'sass:color';
2
+ @use 'sass:meta';
3
+ @use 'sass:list';
4
+ @import '../common/mixin.scss';
5
+
6
+ @function mapcolorvariable($pallete-name){
7
+ @return var(#{'--color-sf-'+ $pallete-name});
8
+ }
9
+
10
+ @function shade-color($color, $percentage) {
11
+ @return mix($black, $color, $percentage);
12
+ }
13
+
14
+ @function tint-color($color, $percentage) {
15
+ @return mix($white, $color, $percentage);
16
+ }
17
+
18
+ :root {
19
+ --color-sf-black: 0, 0, 0;
20
+ --color-sf-white: 255, 255, 255;
21
+ --color-sf-content-bg-color: #fff;
22
+ --color-sf-content-bg-color-alt1: #f8f9fa;
23
+ --color-sf-content-bg-color-alt2: #e9ecef;
24
+ --color-sf-content-bg-color-alt3: #dee2e6;
25
+ --color-sf-content-bg-color-alt4: #ced4da;
26
+ --color-sf-content-bg-color-alt5: #adb5bd;
27
+ --color-sf-content-bg-color-hover: #f8f9fa;
28
+ --color-sf-content-bg-color-pressed: #e9ecef;
29
+ --color-sf-content-bg-color-focus: #e9ecef;
30
+ --color-sf-content-bg-color-selected: #0d6efd;
31
+ --color-sf-content-bg-color-dragged: #ced4da;
32
+ --color-sf-content-bg-color-disabled: #e9ecef;
33
+ --color-sf-flyout-bg-color: #fff;
34
+ --color-sf-flyout-bg-color-hover: #f8f9fa;
35
+ --color-sf-flyout-bg-color-pressed: #0d6efd;
36
+ --color-sf-flyout-bg-color-focus: #f8f9fa;
37
+ --color-sf-overlay-bg-color: 0, 0, 0;
38
+ --color-sf-table-bg-color-hover: rgba(0, 0, 0, .07);
39
+ --color-sf-table-bg-color-pressed: #dee2e6;
40
+ --color-sf-table-bg-color-selected: rgba(0, 0, 0, .1);
41
+
42
+ // text-color
43
+ --color-sf-content-text-color: #212529;
44
+ --color-sf-content-text-color-alt1: rgba(33, 37, 41, .75);
45
+ --color-sf-content-text-color-alt2: rgba(33, 37, 41, .5);
46
+ --color-sf-content-text-color-alt3: rgba(33, 37, 41, .25);
47
+ --color-sf-content-text-color-hover: #000;
48
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
49
+ --color-sf-content-text-color-focus: #000;
50
+ --color-sf-content-text-color-selected: #fff;
51
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
52
+ --color-sf-content-text-color-disabled: rgba(33, 37, 41, .75);
53
+ --color-sf-placeholder-text-color: #6c757d;
54
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
55
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
56
+ --color-sf-flyout-text-color-pressed: #fff;
57
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
58
+ --color-sf-flyout-text-color-disabled: rgba(33, 37, 41, .5);
59
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
60
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
61
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
62
+
63
+ // icon-color
64
+ --color-sf-icon-color: #6c757d;
65
+ --color-sf-icon-color-hover: #343a40;
66
+ --color-sf-icon-color-pressed: #212529;
67
+ --color-sf-icon-color-disabled: #adb5bd;
68
+
69
+ // close-icon-color
70
+ --color-sf-close-icon-color: rgba(0, 0, 0, .5);
71
+ --color-sf-close-icon-color-hover: rgba(0, 0, 0, .75);
72
+ --color-sf-close-icon-color-pressed: rgba(0, 0, 0, 1);
73
+ --color-sf-close-icon-color-disabled: rgba(0, 0, 0, .25);
74
+
75
+ // border-color
76
+ --color-sf-border-light: #dee2e6;
77
+ --color-sf-border: #dee2e6;
78
+ --color-sf-border-dark: #adb5bd;
79
+ --color-sf-border-hover: #dee2e6;
80
+ --color-sf-border-pressed: #dee2e6;
81
+ --color-sf-border-focus: #86b7fe;
82
+ --color-sf-border-selected: #86b7fe;
83
+ --color-sf-border-dragged: #dee2e6;
84
+ --color-sf-border-disabled: #dee2e6;
85
+ --color-sf-border-warning: #ffc107;
86
+ --color-sf-border-error: #dc3545;
87
+ --color-sf-border-success: #198754;
88
+ --color-sf-spreadsheet-gridline: #dee2e6;
89
+ --color-sf-flyout-border: rgba(0, 0, 0, .175);
90
+
91
+ //sf Variables
92
+ --color-sf-primary: rgba(13, 110, 253, 1);
93
+ --color-sf-primary-text-color: #fff;
94
+ --color-sf-primary-light: #86b7fe;
95
+ --color-sf-primary-lighter: #cfe2ff;
96
+ --color-sf-primary-dark: #3367d1;
97
+ --color-sf-primary-darker: #052c65;
98
+ --color-sf-secondary: rgba(108, 117, 125, 1);
99
+ --color-sf-success: rgba(25, 135, 84, 1);
100
+ --color-sf-info: rgba(13, 202, 240, 1);
101
+ --color-sf-warning: rgba(255, 193, 7, 1);
102
+ --color-sf-danger: rgba(220, 53, 69, 1);
103
+ --color-sf-success-light: #d1e7dd;
104
+ --color-sf-info-light: #cff4fc;
105
+ --color-sf-warning-light: #fff3cd;
106
+ --color-sf-danger-light: #f8d7da;
107
+ --color-sf-success-dark: #0a3622;
108
+ --color-sf-info-dark: #055160;
109
+ --color-sf-warning-dark: #664d03;
110
+ --color-sf-danger-dark: #58151c;
111
+ --color-sf-success-light-alt: #d1e7dd;
112
+ --color-sf-info-light-alt: #cff4fc;
113
+ --color-sf-warning-light-alt: #fff3cd;
114
+ --color-sf-danger-light-alt: #f8d7da;
115
+ --color-sf-primary-shadow: 13, 110, 253;
116
+ --color-sf-secondary-shadow: 108, 117, 125;
117
+ --color-sf-success-shadow: 25, 135, 84;
118
+ --color-sf-info-shadow: 13, 202, 240;
119
+ --color-sf-warning-shadow: 255, 193, 7;
120
+ --color-sf-danger-shadow: 220, 53, 69;
121
+
122
+ // Primary-button
123
+ --color-sf-primary-bg-color: var(--color-sf-primary);
124
+ --color-sf-primary-border-color: var(--color-sf-primary);
125
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
126
+ --color-sf-primary-bg-color-hover: #0b5ed7;
127
+ --color-sf-primary-border-color-hover: #0a58ca;
128
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
129
+ --color-sf-primary-bg-color-pressed: #0a58ca;
130
+ --color-sf-primary-border-color-pressed: #0a58ca;
131
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
132
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
133
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
134
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
135
+ --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
136
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
137
+ --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
138
+
139
+ // Secondary-button
140
+ --color-sf-secondary-bg-color: var(--color-sf-secondary);
141
+ --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
142
+ --color-sf-secondary-text-color: #fff;
143
+ --color-sf-secondary-bg-color-hover: #5c636a;
144
+ --color-sf-secondary-border-color-hover: #565e64;
145
+ --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
146
+ --color-sf-secondary-bg-color-pressed: #565e64;
147
+ --color-sf-secondary-border-color-pressed: #51585e;
148
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
149
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
150
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
151
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
152
+ --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
153
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
154
+ --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
155
+
156
+ // Success-button
157
+ --color-sf-success-bg-color: var(--color-sf-success);
158
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
159
+ --color-sf-success-text: #fff;
160
+ --color-sf-success-bg-color-hover: #157347;
161
+ --color-sf-success-border-color-hover: #146c43;
162
+ --color-sf-success-text-hover: var(--color-sf-success-text);
163
+ --color-sf-success-bg-color-pressed: #146c43;
164
+ --color-sf-success-border-color-pressed: #13653f;
165
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
166
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
167
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
168
+ --color-sf-success-text-focus: var(--color-sf-success-text);
169
+ --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
170
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
171
+ --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
172
+
173
+ // Warning-button
174
+ --color-sf-warning-bg-color: var(--color-sf-warning);
175
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
176
+ --color-sf-warning-text: #000;
177
+ --color-sf-warning-bg-color-hover: #ffca2c;
178
+ --color-sf-warning-border-color-hover: #ffc720;
179
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
180
+ --color-sf-warning-bg-color-pressed: #ffcd39;
181
+ --color-sf-warning-border-color-pressed: #ffc720;
182
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
183
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
184
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
185
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
186
+ --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
187
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
188
+ --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
189
+
190
+ // Info-button
191
+ --color-sf-info-bg-color: var(--color-sf-info);
192
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
193
+ --color-sf-info-text: #000;
194
+ --color-sf-info-bg-color-hover: #31d2f2;
195
+ --color-sf-info-border-color-hover: #25cff2;
196
+ --color-sf-info-text-hover: var(--color-sf-info-text);
197
+ --color-sf-info-bg-color-pressed: #3dd5f3;
198
+ --color-sf-info-border-color-pressed: #25cff2;
199
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
200
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
201
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
202
+ --color-sf-info-text-focus: var(--color-sf-info-text-hover);
203
+ --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
204
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
205
+ --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
206
+
207
+ // danger-button
208
+ --color-sf-danger-bg-color: var(--color-sf-danger);
209
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
210
+ --color-sf-danger-text: #fff;
211
+ --color-sf-danger-bg-color-hover: #bb2d3b;
212
+ --color-sf-danger-border-color-hover: #b02a37;
213
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
214
+ --color-sf-danger-bg-color-pressed: #b02a37;
215
+ --color-sf-danger-border-color-pressed: #a52834;
216
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
217
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
218
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
219
+ --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
220
+ --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
221
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
222
+ --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
223
+
224
+ //Outline button
225
+ --color-sf-primary-outline: var(--color-sf-primary-bg-color);
226
+ --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
227
+ --color-sf-warning-outline: var(--color-sf-warning-bg-color);
228
+ --color-sf-danger-outline: var(--color-sf-danger-bg-color);
229
+ --color-sf-success-outline: var(--color-sf-success-bg-color);
230
+ --color-sf-info-outline: var(--color-sf-info-bg-color);
231
+
232
+ // Tooltip
233
+ --color-sf-tooltip-bg-color: rgba(0, 0, 0, .9);
234
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
235
+ --color-sf-tooltip-text-color: #fff;
236
+
237
+ //appbar Light
238
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
239
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
240
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
241
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
242
+
243
+ //dark
244
+ --color-sf-appbar-bg-color-alt2: #212529;
245
+ --color-sf-appbar-color-alt2: #fff;
246
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
247
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
248
+
249
+ //diagram Palette color
250
+ --color-sf-diagram-palette-background: #fff;
251
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
252
+ --color-sf-diagram-palette-selected-color: #e9ecef;
253
+
254
+ //rating
255
+ --color-sf-rating-selected-color: var(--color-sf-primary);
256
+ --color-sf-rating-unrated-color: #6c757d;
257
+ --color-sf-rating-selected-disabled-color: #adb5bd;
258
+ --color-sf-rating-unrated-disabled-color: #ced4da;
259
+ --color-sf-rating-selected-hover-color: #63757d;
260
+ --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
261
+ --color-sf-rating-pressed-color: #599bfe;
262
+
263
+ //Message default
264
+ --color-sf-msg-color: #2b2f32;
265
+ --color-sf-msg-bg-color: #e2e3e5;
266
+ --color-sf-msg-border-color: #c4c8cb;
267
+ --color-sf-msg-color-alt1: var(--color-sf-msg-color);
268
+ --color-sf-msg-bg-color-alt1: transparent;
269
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
270
+ --color-sf-msg-color-alt2: #fff;
271
+ --color-sf-msg-bg-color-alt2: #6c757d;
272
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
273
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
274
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
275
+ --color-sf-msg-icon-color-alt2: #fff;
276
+ --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
277
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
278
+ --color-sf-msg-close-icon-color-alt2: #fff;
279
+
280
+ //Message danger
281
+ --color-sf-msg-danger-color: #58151c;
282
+ --color-sf-msg-danger-bg-color: #f8d7da;
283
+ --color-sf-msg-danger-border-color: #f1aeb5;
284
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
285
+ --color-sf-msg-danger-bg-color-alt1: transparent;
286
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
287
+ --color-sf-msg-danger-color-alt2: #fff;
288
+ --color-sf-msg-danger-bg-color-alt2: #dc3545;
289
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
290
+ --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
291
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
292
+ --color-sf-msg-danger-icon-color-alt2: #fff;
293
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
294
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
295
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
296
+
297
+ //Message success
298
+ --color-sf-msg-success-color: #0a3622;
299
+ --color-sf-msg-success-bg-color: #d1e7dd;
300
+ --color-sf-msg-success-border-color: #a3cfbb;
301
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
302
+ --color-sf-msg-success-bg-color-alt1: transparent;
303
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
304
+ --color-sf-msg-success-color-alt2: #fff;
305
+ --color-sf-msg-success-bg-color-alt2: #198754;
306
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
307
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
308
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
309
+ --color-sf-msg-success-icon-color-alt2: #fff;
310
+ --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
311
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
312
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
313
+
314
+ //Message warning
315
+ --color-sf-msg-warning-color: #664d03;
316
+ --color-sf-msg-warning-bg-color: #fff3cd;
317
+ --color-sf-msg-warning-border-color: #ffe69c;
318
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
319
+ --color-sf-msg-warning-bg-color-alt1: transparent;
320
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
321
+ --color-sf-msg-warning-color-alt2: #212529;
322
+ --color-sf-msg-warning-bg-color-alt2: #ffc107;
323
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
324
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
325
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
326
+ --color-sf-msg-warning-icon-color-alt2: #212529;
327
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
328
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
329
+ --color-sf-msg-warning-close-icon-color-alt2: #212529;
330
+
331
+ //Message info
332
+ --color-sf-msg-info-color: #055160;
333
+ --color-sf-msg-info-bg-color: #cff4fc;
334
+ --color-sf-msg-info-border-color: #9eeaf9;
335
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
336
+ --color-sf-msg-info-bg-color-alt1: transparent;
337
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
338
+ --color-sf-msg-info-color-alt2: #212529;
339
+ --color-sf-msg-info-bg-color-alt2: #0dcaf0;
340
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
341
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
342
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
343
+ --color-sf-msg-info-icon-color-alt2: #212529;
344
+ --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
345
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
346
+ --color-sf-msg-info-close-icon-color-alt2: #212529;
347
+
348
+ //badge
349
+ --color-sf-badge-light-bg-color: #faf9fa;
350
+ --color-sf-badge-light-border-color: #faf9fa;
351
+ --color-sf-badge-light-text-color: #000;
352
+ --color-sf-badge-dark-bg-color: #212529;
353
+ --color-sf-badge-dark-border-color: #212529;
354
+ --color-sf-badge-dark-text-color: #fff;
355
+
356
+ //tab
357
+ --color-sf-tab-border: #e9ecef;
358
+
359
+ //stepper
360
+ --color-sf-stepper: #fff;
361
+
362
+ --color-sf-shadow-color: #{#000};
363
+ --color-sf-shadow-color1: #{#fff};
364
+ }
365
+
366
+ .e-dark-mode{
367
+ --color-sf-content-bg-color: #212529;
368
+ --color-sf-content-bg-color-alt1: #2b3035;
369
+ --color-sf-content-bg-color-alt2: #343a40;
370
+ --color-sf-content-bg-color-alt3: #495057;
371
+ --color-sf-content-bg-color-alt4: #1a1d20;
372
+ --color-sf-content-bg-color-alt5: #adb5bd;
373
+ --color-sf-content-bg-color-hover: #2b3035;
374
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
375
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
376
+ --color-sf-content-bg-color-selected: #0d6efd;
377
+ --color-sf-content-bg-color-dragged: #343a40;
378
+ --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color-alt2);
379
+ --color-sf-flyout-bg-color: #212529;
380
+ --color-sf-flyout-bg-color-hover: #2b3035;
381
+ --color-sf-flyout-bg-color-pressed: #0d6efd;
382
+ --color-sf-flyout-bg-color-focus: #2b3035;
383
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
384
+ --color-sf-table-bg-color-hover: rgba(255, 255, 255, .07);
385
+ --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
386
+ --color-sf-table-bg-color-selected: rgba(255, 255, 255, .1);
387
+
388
+ // text-color
389
+ --color-sf-content-text-color: #dee2e6;
390
+ --color-sf-content-text-color-alt1: rgba(222, 226, 230, .75);
391
+ --color-sf-content-text-color-alt2: rgba(222, 226, 230, .5);
392
+ --color-sf-content-text-color-alt3: rgba(222, 226, 230, .25);
393
+ --color-sf-content-text-color-hover: #fff;
394
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
395
+ --color-sf-content-text-color-focus: #fff;
396
+ --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
397
+ --color-sf-content-text-color-dragged: #fff;
398
+ --color-sf-content-text-color-disabled: rgba(222, 226, 230, .75);
399
+ --color-sf-placeholder-text-color: #6c757d;
400
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
401
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
402
+ --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
403
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
404
+ --color-sf-flyout-text-color-disabled: rgba(222, 226, 230, .5);
405
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
406
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
407
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
408
+
409
+ // icon-color
410
+ --color-sf-icon-color: #adb5bd;
411
+ --color-sf-icon-color-hover: #dee2e6;
412
+ --color-sf-icon-color-pressed: #f8f9fa;
413
+ --color-sf-icon-color-disabled: #adb5bd;
414
+
415
+ // close-icon-color
416
+ --color-sf-close-icon-color: rgba(255, 255, 255, .5);
417
+ --color-sf-close-icon-color-hover: rgba(255, 255, 255, .75);
418
+ --color-sf-close-icon-color-pressed: rgba(255, 255, 255, 1);
419
+ --color-sf-close-icon-color-disabled: rgba(255, 255, 255, .25);
420
+
421
+ // border-color
422
+ --color-sf-border-light: #495057;
423
+ --color-sf-border: #495057;
424
+ --color-sf-border-dark: #6c757d;
425
+ --color-sf-border-hover: #495057;
426
+ --color-sf-border-pressed: #495057;
427
+ --color-sf-border-focus: #86d7fe;
428
+ --color-sf-border-selected: #86d7fe;
429
+ --color-sf-border-dragged: #495057;
430
+ --color-sf-border-disabled: #495057;
431
+ --color-sf-border-warning: #ffda6a;
432
+ --color-sf-border-error: #ea868f;
433
+ --color-sf-border-success: #75b798;
434
+ --color-sf-spreadsheet-gridline: #dee2e6;
435
+ --color-sf-flyout-border: rgba(255, 255, 255, .15);
436
+
437
+ //sf Variables
438
+ --color-sf-primary: rgba(13, 110, 253, 1);
439
+ --color-sf-primary-text-color: #fff;
440
+ --color-sf-primary-light: #86b7fe;
441
+ --color-sf-primary-lighter: #031633;
442
+ --color-sf-primary-dark: #073ba6;
443
+ --color-sf-primary-darker: #6ea8fe;
444
+ --color-sf-secondary: rgba(108, 117, 125, 1);
445
+ --color-sf-success: rgba(25, 135, 84, 1);
446
+ --color-sf-info: rgba(13, 202, 240, 1);
447
+ --color-sf-warning: rgba(255, 193, 7, 1);
448
+ --color-sf-danger: rgba(220, 53, 69, 1);
449
+ --color-sf-success-light: #75b798;
450
+ --color-sf-info-light: #6edff6;
451
+ --color-sf-warning-light: #ffda6a;
452
+ --color-sf-danger-light: #ea868f;
453
+ --color-sf-success-dark: #75b798;
454
+ --color-sf-info-dark: #6edff6;
455
+ --color-sf-warning-dark: #ffda6a;
456
+ --color-sf-danger-dark: #ea868f;
457
+ --color-sf-success-light-alt: #051b11;
458
+ --color-sf-info-light-alt: #032830;
459
+ --color-sf-warning-light-alt: #332701;
460
+ --color-sf-danger-light-alt: #2c0b0e;
461
+ --color-sf-primary-shadow: 13, 110, 253;
462
+ --color-sf-secondary-shadow: 108, 117, 125;
463
+ --color-sf-success-shadow: 25, 135, 84;
464
+ --color-sf-info-shadow: 13, 202, 240;
465
+ --color-sf-warning-shadow: 255, 193, 7;
466
+ --color-sf-danger-shadow: 220, 53, 69;
467
+ --color-sf-black: 0, 0, 0;
468
+ --color-sf-white: 255, 255, 255;
469
+
470
+ // Primary-button
471
+ --color-sf-primary-bg-color: var(--color-sf-primary);
472
+ --color-sf-primary-border-color: var(--color-sf-primary);
473
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
474
+ --color-sf-primary-bg-color-hover: #0b5ed7;
475
+ --color-sf-primary-border-color-hover: #0a58ca;
476
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
477
+ --color-sf-primary-bg-color-pressed: #0a58ca;
478
+ --color-sf-primary-border-color-pressed: #0a58ca;
479
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
480
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
481
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
482
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
483
+ --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
484
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
485
+ --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
486
+
487
+ // Secondary-button
488
+ --color-sf-secondary-bg-color: var(--color-sf-secondary);
489
+ --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
490
+ --color-sf-secondary-text-color: #fff;
491
+ --color-sf-secondary-bg-color-hover: #5c636a;
492
+ --color-sf-secondary-border-color-hover: #565e64;
493
+ --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
494
+ --color-sf-secondary-bg-color-pressed: #565e64;
495
+ --color-sf-secondary-border-color-pressed: #51585e;
496
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
497
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
498
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
499
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
500
+ --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
501
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
502
+ --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
503
+
504
+ // Success-button
505
+ --color-sf-success-bg-color: var(--color-sf-success);
506
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
507
+ --color-sf-success-text: #fff;
508
+ --color-sf-success-bg-color-hover: #157347;
509
+ --color-sf-success-border-color-hover: #146c43;
510
+ --color-sf-success-text-hover: var(--color-sf-success-text);
511
+ --color-sf-success-bg-color-pressed: #146c43;
512
+ --color-sf-success-border-color-pressed: #15803d;
513
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
514
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
515
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
516
+ --color-sf-success-text-focus: var(--color-sf-success-text);
517
+ --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
518
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
519
+ --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
520
+
521
+ // Warning-button
522
+ --color-sf-warning-bg-color: var(--color-sf-warning);
523
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
524
+ --color-sf-warning-text: #000;
525
+ --color-sf-warning-bg-color-hover: #ffca2c;
526
+ --color-sf-warning-border-color-hover: #ffc720;
527
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
528
+ --color-sf-warning-bg-color-pressed: #ffcd39;
529
+ --color-sf-warning-border-color-pressed: #ffc720;
530
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
531
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
532
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
533
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
534
+ --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
535
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
536
+ --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
537
+
538
+ // Info-button
539
+ --color-sf-info-bg-color: var(--color-sf-info);
540
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
541
+ --color-sf-info-text: #000;
542
+ --color-sf-info-bg-color-hover: #31d2f2;
543
+ --color-sf-info-border-color-hover: #25cff2;
544
+ --color-sf-info-text-hover: var(--color-sf-info-text);
545
+ --color-sf-info-bg-color-pressed: #3dd5f3;
546
+ --color-sf-info-border-color-pressed: #25cff2;
547
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
548
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
549
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
550
+ --color-sf-info-text-focus: var(--color-sf-info-text-hover);
551
+ --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
552
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
553
+ --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
554
+
555
+ // danger-button
556
+ --color-sf-danger-bg-color: var(--color-sf-danger);
557
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
558
+ --color-sf-danger-text: #fff;
559
+ --color-sf-danger-bg-color-hover: #bb2d3b;
560
+ --color-sf-danger-border-color-hover: #b02a37;
561
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
562
+ --color-sf-danger-bg-color-pressed: #b02a37;
563
+ --color-sf-danger-border-color-pressed: #a52834;
564
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
565
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
566
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
567
+ --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
568
+ --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
569
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
570
+ --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
571
+
572
+ //Outline button
573
+ --color-sf-primary-outline: var(--color-sf-primary-bg-color);
574
+ --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
575
+ --color-sf-warning-outline: var(--color-sf-warning-bg-color);
576
+ --color-sf-danger-outline: var(--color-sf-danger-bg-color);
577
+ --color-sf-success-outline: var(--color-sf-success-bg-color);
578
+ --color-sf-info-outline: var(--color-sf-info-bg-color);
579
+
580
+ // Tooltip
581
+ --color-sf-tooltip-bg-color: rgba(255, 255, 255, .9);
582
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
583
+ --color-sf-tooltip-text-color: #212529;
584
+
585
+ //Light
586
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
587
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
588
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
589
+ --color-sf-appbar-hover-bg-color-alt1: transparent;
590
+
591
+ //dark
592
+ --color-sf-appbar-bg-color-alt2: #dee2e6;
593
+ --color-sf-appbar-color-alt2: #212529;
594
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
595
+ --color-sf-appbar-hover-bg-color-alt2: transparent;
596
+
597
+ //diagram Palette color
598
+ --color-sf-diagram-palette-background: #dee2e6;
599
+ --color-sf-diagram-palette-hover-background: #ced4da;
600
+
601
+ //rating
602
+ --color-sf-rating-selected-color: var(--color-sf-primary);
603
+ --color-sf-rating-unrated-color: #adb5bd;
604
+ --color-sf-rating-selected-disabled-color: #6c757d;
605
+ --color-sf-rating-unrated-disabled-color: #495057;
606
+ --color-sf-rating-selected-hover-color: #adb5bd;
607
+ --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
608
+ --color-sf-rating-pressed-color: #599bfe;
609
+
610
+ //Message default
611
+ --color-sf-msg-color: #a7acb1;
612
+ --color-sf-msg-bg-color: #161719;
613
+ --color-sf-msg-border-color: #41464b;
614
+ --color-sf-msg-color-alt1: var(--color-sf-msg-color);
615
+ --color-sf-msg-bg-color-alt1: transparent;
616
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
617
+ --color-sf-msg-color-alt2: #fff;
618
+ --color-sf-msg-bg-color-alt2: #6c757d;
619
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
620
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
621
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
622
+ --color-sf-msg-icon-color-alt2: #fff;
623
+ --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
624
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
625
+ --color-sf-msg-close-icon-color-alt2: #fff;
626
+
627
+ //Message danger
628
+ --color-sf-msg-danger-color: #ea868f;
629
+ --color-sf-msg-danger-bg-color: #2c0b0e;
630
+ --color-sf-msg-danger-border-color: #842029;
631
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
632
+ --color-sf-msg-danger-bg-color-alt1: transparent;
633
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
634
+ --color-sf-msg-danger-color-alt2: #fff;
635
+ --color-sf-msg-danger-bg-color-alt2: #dc3545;
636
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
637
+ --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
638
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
639
+ --color-sf-msg-danger-icon-color-alt2: #fff;
640
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
641
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
642
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
643
+
644
+ //Message success
645
+ --color-sf-msg-success-color: #75b798;
646
+ --color-sf-msg-success-bg-color: #051b11;
647
+ --color-sf-msg-success-border-color: #0f5132;
648
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
649
+ --color-sf-msg-success-bg-color-alt1: transparent;
650
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
651
+ --color-sf-msg-success-color-alt2: #fff;
652
+ --color-sf-msg-success-bg-color-alt2: #198754;
653
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
654
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
655
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
656
+ --color-sf-msg-success-icon-color-alt2: #fff;
657
+ --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
658
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
659
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
660
+
661
+ //Message warning
662
+ --color-sf-msg-warning-color: #ffda6a;
663
+ --color-sf-msg-warning-bg-color: #332701;
664
+ --color-sf-msg-warning-border-color: #997404;
665
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
666
+ --color-sf-msg-warning-bg-color-alt1: transparent;
667
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
668
+ --color-sf-msg-warning-color-alt2: #212529;
669
+ --color-sf-msg-warning-bg-color-alt2: #ffc107;
670
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
671
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
672
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
673
+ --color-sf-msg-warning-icon-color-alt2: #212529;
674
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
675
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
676
+ --color-sf-msg-warning-close-icon-color-alt2: #212529;
677
+
678
+ //Message info
679
+ --color-sf-msg-info-color: #6edff6;
680
+ --color-sf-msg-info-bg-color: #032830;
681
+ --color-sf-msg-info-border-color: #087990;
682
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
683
+ --color-sf-msg-info-bg-color-alt1: transparent;
684
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
685
+ --color-sf-msg-info-color-alt2: #212529;
686
+ --color-sf-msg-info-bg-color-alt2: #0dcaf0;
687
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
688
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
689
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
690
+ --color-sf-msg-info-icon-color-alt2: #212529;
691
+ --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
692
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
693
+ --color-sf-msg-info-close-icon-color-alt2: #212529;
694
+
695
+ //badge
696
+ --color-sf-badge-light-bg-color: #faf9fa;
697
+ --color-sf-badge-light-border-color: #faf9fa;
698
+ --color-sf-badge-light-text-color: #000;
699
+ --color-sf-badge-dark-bg-color: #212529;
700
+ --color-sf-badge-dark-border-color: #212529;
701
+ --color-sf-badge-dark-text-color: #fff;
702
+
703
+ //tab
704
+ --color-sf-tab-border: #343a40;
705
+
706
+ //stepper
707
+ --color-sf-stepper: #212529;
708
+
709
+ --color-sf-shadow-color: #{#fff};
710
+ --color-sf-shadow-color1: #{#000};
711
+ }
712
+
713
+ // backgroundcolor
714
+ $content-bg-color: mapcolorvariable('content-bg-color') !default;
715
+ $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
716
+ $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
717
+ $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
718
+ $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
719
+ $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
720
+ $content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
721
+ $content-bg-color-pressed: mapcolorvariable('content-bg-color-pressed') !default;
722
+ $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
723
+ $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
724
+ $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
725
+ $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
726
+ $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
727
+ $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
728
+ $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
729
+ $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
730
+ $overlay-bg: mapcolorvariable('overlay-bg-color');
731
+ $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
732
+ $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
733
+ $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
734
+
735
+ // text-color
736
+ $content-text-color: mapcolorvariable('content-text-color') !default;
737
+ $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
738
+ $content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
739
+ $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
740
+ $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
741
+ $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
742
+ $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
743
+ $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
744
+ $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
745
+ $content-text-color-disabled: mapcolorvariable('content-text-color-disabled') !default;
746
+ $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
747
+ $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
748
+ $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
749
+ $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
750
+ $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
751
+ $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
752
+ $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
753
+ $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
754
+
755
+ // icon-color
756
+ $icon-color: mapcolorvariable('icon-color') !default;
757
+ $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
758
+ $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
759
+ $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
760
+
761
+ // border-color
762
+ $border-light: mapcolorvariable('border-light') !default;
763
+ $border: mapcolorvariable('border') !default;
764
+ $border-dark: mapcolorvariable('border-dark') !default;
765
+ $border-hover: mapcolorvariable('border-hover') !default;
766
+ $border-pressed: mapcolorvariable('border-pressed') !default;
767
+ $border-focus: mapcolorvariable('border-focus') !default;
768
+ $border-selected: mapcolorvariable('border-selected') !default;
769
+ $border-dragged:mapcolorvariable('border-dragged') !default;
770
+ $border-disabled: mapcolorvariable('border-disabled') !default;
771
+ $border-warning: mapcolorvariable('border-warning') !default;
772
+ $border-error: mapcolorvariable('border-error') !default;
773
+ $border-success: mapcolorvariable('border-success') !default;
774
+ $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
775
+ $flyout-border: mapcolorvariable('flyout-border') !default;
776
+
777
+ //sf Variables
778
+ $primary: mapcolorvariable('primary') !default;
779
+ $secondary: mapcolorvariable('secondary') !default;
780
+ $primary-text-color: mapcolorvariable('primary-text-color') !default;
781
+ $primary-light: mapcolorvariable('primary-light') !default;
782
+ $primary-lighter: mapcolorvariable('primary-lighter') !default;
783
+ $success: mapcolorvariable('success') !default;
784
+ $info: mapcolorvariable('info') !default;
785
+ $warning: mapcolorvariable('warning') !default;
786
+ $danger: mapcolorvariable('danger') !default;
787
+ $success-light: mapcolorvariable('success-light') !default;
788
+ $info-light: mapcolorvariable('info-light') !default;
789
+ $warning-light: mapcolorvariable('warning-light') !default;
790
+ $danger-light: mapcolorvariable('danger-light') !default;
791
+ $success-dark: mapcolorvariable('success-dark') !default;
792
+ $info-dark: mapcolorvariable('info-dark') !default;
793
+ $warning-dark: mapcolorvariable('warning-dark') !default;
794
+ $danger-dark: mapcolorvariable('danger-dark') !default;
795
+ $success-light-alt: mapcolorvariable('success-light-alt') !default;
796
+ $info-light-alt: mapcolorvariable('info-light-alt') !default;
797
+ $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
798
+ $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
799
+
800
+ // Primary-button
801
+ $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
802
+ $primary-border-color: mapcolorvariable('primary-border-color') !default;
803
+ $primary-text: mapcolorvariable('primary-text') !default;
804
+ $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
805
+ $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
806
+ $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
807
+ $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
808
+ $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
809
+ $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
810
+ $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
811
+ $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
812
+ $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
813
+ $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
814
+ $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
815
+ $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
816
+
817
+ // Secondary-button
818
+ $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
819
+ $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
820
+ $secondary-text-color: mapcolorvariable('secondary-text-color') !default;
821
+ $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
822
+ $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
823
+ $secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
824
+ $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
825
+ $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
826
+ $secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
827
+ $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
828
+ $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
829
+ $secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
830
+ $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
831
+ $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
832
+ $secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
833
+
834
+ // Success-button
835
+ $success-bg-color: mapcolorvariable('success-bg-color') !default;
836
+ $success-border-color: mapcolorvariable('success-border-color') !default;
837
+ $success-text: mapcolorvariable('success-text') !default;
838
+ $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
839
+ $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
840
+ $success-text-hover: mapcolorvariable('success-text-hover') !default;
841
+ $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
842
+ $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
843
+ $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
844
+ $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
845
+ $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
846
+ $success-text-focus: mapcolorvariable('success-text-focus') !default;
847
+ $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
848
+ $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
849
+ $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
850
+
851
+ // Warning-button
852
+ $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
853
+ $warning-border-color: mapcolorvariable('warning-border-color') !default;
854
+ $warning-text: mapcolorvariable('warning-text') !default;
855
+ $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
856
+ $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
857
+ $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
858
+ $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
859
+ $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
860
+ $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
861
+ $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
862
+ $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
863
+ $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
864
+ $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
865
+ $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
866
+ $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
867
+
868
+ // Info-button
869
+ $info-bg-color: mapcolorvariable('info-bg-color') !default;
870
+ $info-border-color: mapcolorvariable('info-border-color') !default;
871
+ $info-text: mapcolorvariable('info-text') !default;
872
+ $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
873
+ $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
874
+ $info-text-hover: mapcolorvariable('info-text-hover') !default;
875
+ $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
876
+ $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
877
+ $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
878
+ $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
879
+ $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
880
+ $info-text-focus: mapcolorvariable('info-text-focus') !default;
881
+ $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
882
+ $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
883
+ $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
884
+
885
+ // danger-button
886
+ $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
887
+ $danger-border-color: mapcolorvariable('danger-border-color') !default;
888
+ $danger-text: mapcolorvariable('danger-text') !default;
889
+ $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
890
+ $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
891
+ $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
892
+ $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
893
+ $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
894
+ $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
895
+ $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
896
+ $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
897
+ $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
898
+ $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
899
+ $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
900
+ $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
901
+
902
+ //Outline button
903
+ $primary-outline: mapcolorvariable('primary-outline') !default;
904
+ $secondary-outline: mapcolorvariable('secondary-outline') !default;
905
+ $warning-outline: mapcolorvariable('warning-outline') !default;
906
+ $danger-outline: mapcolorvariable('danger-outline') !default;
907
+ $success-outline: mapcolorvariable('success-outline') !default;
908
+ $info-outline: mapcolorvariable('info-outline') !default;
909
+
910
+ // Tooltip
911
+ $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
912
+ $tooltip-border: mapcolorvariable('tooltip-border') !default;
913
+ $tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
914
+
915
+ //appbar
916
+ //Light
917
+ $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
918
+ $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
919
+ $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
920
+ $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
921
+
922
+ //dark
923
+ $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
924
+ $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
925
+ $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
926
+ $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
927
+
928
+ //diagram Palette color
929
+ $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
930
+ $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
931
+ $diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;
932
+
933
+ //rating
934
+ $rating-selected-color:mapcolorvariable('rating-selected-color') !default;
935
+ $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
936
+ $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
937
+ $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
938
+ $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color') !default;
939
+ $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
940
+ $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
941
+
942
+ //Message component
943
+
944
+ //Message default
945
+ $msg-color: mapcolorvariable('msg-color') !default;
946
+ $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
947
+ $msg-border-color:mapcolorvariable('msg-border-color') !default;
948
+ $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
949
+ $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
950
+ $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
951
+ $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
952
+ $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
953
+ $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
954
+ $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
955
+ $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
956
+ $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
957
+ $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
958
+ $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
959
+ $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2') !default;
960
+
961
+ //Message success
962
+ $msg-success-color: mapcolorvariable('msg-success-color') !default;
963
+ $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
964
+ $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
965
+ $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
966
+ $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
967
+ $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
968
+ $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
969
+ $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
970
+ $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
971
+ $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
972
+ $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
973
+ $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
974
+ $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
975
+ $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
976
+ $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
977
+
978
+ //Message danger
979
+ $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
980
+ $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
981
+ $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
982
+ $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
983
+ $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
984
+ $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
985
+ $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
986
+ $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
987
+ $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
988
+ $msg-danger-icon-color: mapcolorvariable('msg-danger-icon-color') !default;
989
+ $msg-danger-icon-color-alt1: mapcolorvariable('msg-danger-icon-color-alt1') !default;
990
+ $msg-danger-icon-color-alt2: mapcolorvariable('msg-danger-icon-color-alt2') !default;
991
+ $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
992
+ $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
993
+ $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
994
+
995
+ //Message Info
996
+ $msg-info-color: mapcolorvariable('msg-info-color') !default;
997
+ $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
998
+ $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
999
+ $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
1000
+ $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
1001
+ $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
1002
+ $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
1003
+ $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
1004
+ $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
1005
+ $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
1006
+ $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
1007
+ $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
1008
+ $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
1009
+ $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
1010
+ $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
1011
+
1012
+ //Message Warning
1013
+ $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
1014
+ $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
1015
+ $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
1016
+ $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
1017
+ $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
1018
+ $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
1019
+ $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
1020
+ $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
1021
+ $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
1022
+ $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
1023
+ $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
1024
+ $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
1025
+ $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
1026
+ $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
1027
+ $msg-warning-close-icon-color-alt2: mapcolorvariable('msg-warning-close-icon-color-alt2') !default;
1028
+
1029
+ //badge
1030
+ $badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
1031
+ $badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
1032
+ $badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
1033
+ $badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
1034
+ $badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
1035
+ $badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
1036
+ $badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
1037
+ $badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;
1038
+
1039
+ //breadcrumb
1040
+ $breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
1041
+ $breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
1042
+ $breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;
1043
+
1044
+ //tab
1045
+ $tab-alt-wrap-hover-color: mapcolorvariable('tab-alt-wrap-hover-color') !default;
1046
+
1047
+ //treeview
1048
+ $treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;
1049
+
1050
+ //document editor
1051
+ $de-style-btn-bg-color: mapcolorvariable('de-style-btn-bg-color') !default;
1052
+ $de-toggle-border-color: mapcolorvariable('de-toggle-border-color') !default;
1053
+ $de-toggle-hover-color: mapcolorvariable('de-toggle-hover-color') !default;
1054
+ $de-toggle-border-hover-color: mapcolorvariable('de-toggle-border-hover-color') !default;
1055
+ $de-toggle-disabled-color: mapcolorvariable('de-toggle-disabled-color') !default;
1056
+ $connector-point-hover-color: mapcolorvariable('connector-point-hover-color') !default;
1057
+ $gantt-connected-task: mapcolorvariable('gantt-connected-task') !default;
1058
+ $gantt-active-parent-task: mapcolorvariable('gantt-active-parent-task') !default;
1059
+ $timepicker-active-border-color: mapcolorvariable('timepicker-active-border-color') !default;
1060
+ $hdr-selection-border-color: mapcolorvariable('hdr-selection-border-color') !default;
1061
+
1062
+ $primary-dark: mapcolorvariable('primary-dark') !default;
1063
+ $primary-darker: mapcolorvariable('primary-darker') !default;
1064
+ $flyout-text-color-disabled: mapcolorvariable('flyout-text-color-disabled') !default;
1065
+ $close-icon-color: mapcolorvariable('close-icon-color') !default;
1066
+ $close-icon-color-hover: mapcolorvariable('close-icon-color-hover') !default;
1067
+ $close-icon-color-pressed: mapcolorvariable('close-icon-color-pressed') !default;
1068
+ $close-icon-color-disabled: mapcolorvariable('close-icon-color-disabled') !default;
1069
+
1070
+ //badge
1071
+ $badge-light-bg-color: mapcolorvariable('badge-light-bg-color') !default;
1072
+ $badge-light-border-color: mapcolorvariable('badge-light-border-color') !default;
1073
+ $badge-light-text-color: mapcolorvariable('badge-light-text-color') !default;
1074
+ $badge-dark-bg-color: mapcolorvariable('badge-dark-bg-color') !default;
1075
+ $badge-dark-border-color: mapcolorvariable('badge-dark-border-color') !default;
1076
+ $badge-dark-text-color: mapcolorvariable('badge-dark-text-color') !default;
1077
+
1078
+ $tab-border: mapcolorvariable('tab-border') !default;
1079
+ $stepper: mapcolorvariable('stepper') !default;
1080
+
1081
+ $primary-shadow: mapcolorvariable('primary-shadow') !default;
1082
+ $secondary-shadow: mapcolorvariable('secondary-shadow') !default;
1083
+ $success-shadow: mapcolorvariable('success-shadow') !default;
1084
+ $danger-shadow: mapcolorvariable('danger-shadow') !default;
1085
+ $info-shadow: mapcolorvariable('info-shadow') !default;
1086
+ $warning-shadow: mapcolorvariable('warning-shadow') !default;
1087
+
1088
+ $shadow-color: mapcolorvariable('shadow-color') !default;
1089
+ $shadow-color1: mapcolorvariable('shadow-color1') !default;
1090
+
1091
+ // black
1092
+ $black: mapcolorvariable('black') !default;
1093
+
1094
+ // White
1095
+ $white: mapcolorvariable('white') !default;
1096
+
1097
+ // Transparent
1098
+ $transparent: transparent;
1099
+
1100
+ // scss-docs-start gray-color-variables
1101
+ $gray-100: #f8f9fa !default;
1102
+ $gray-200: #e9ecef !default;
1103
+ $gray-300: #dee2e6 !default;
1104
+ $gray-400: #ced4da !default;
1105
+ $gray-500: #adb5bd !default;
1106
+ $gray-600: #6c757d !default;
1107
+ $gray-700: #495057 !default;
1108
+ $gray-800: #343a40 !default;
1109
+ $gray-900: #212529 !default;
1110
+
1111
+ // scss-docs-start color-variables
1112
+ $blue: #0d6efd !default;
1113
+ $indigo: #6610f2 !default;
1114
+ $purple: #6f42c1 !default;
1115
+ $pink: #d63384 !default;
1116
+ $red: #dc3545 !default;
1117
+ $orange: #fd7e14 !default;
1118
+ $yellow: #ffc107 !default;
1119
+ $green: #198754 !default;
1120
+ $teal: #20c997 !default;
1121
+ $cyan: #0dcaf0 !default;
1122
+
1123
+ $primary: $primary !default;
1124
+ $secondary: $secondary !default;
1125
+ $success: $success !default;
1126
+ $info: $info !default;
1127
+ $warning: $warning !default;
1128
+ $danger: $danger !default;
1129
+ $success-light: $success-light !default;
1130
+ $info-light: $info-light !default;
1131
+ $warning-light: $warning-light !default;
1132
+ $danger-light: $danger-light !default;
1133
+ $primary-text-color: $primary-text-color !default;
1134
+ $primary-light: $primary-light !default;
1135
+ $primary-lighter: $primary-lighter !default;
1136
+ $success-dark: $success-dark !default;
1137
+ $info-dark: $info-dark !default;
1138
+ $warning-dark: $warning-dark !default;
1139
+ $danger-dark: $danger-dark !default;
1140
+ $success-light-alt: $success-light-alt !default;
1141
+ $info-light-alt: $info-light-alt !default;
1142
+ $warning-light-alt: $warning-light-alt !default;
1143
+ $danger-light-alt: $danger-light-alt !default;
1144
+
1145
+ // backgroundcolor
1146
+ $content-bg-color: $content-bg-color !default;
1147
+ $content-bg-color-alt1: $content-bg-color-alt1 !default;
1148
+ $content-bg-color-alt2: $content-bg-color-alt2 !default;
1149
+ $content-bg-color-alt3: $content-bg-color-alt3 !default;
1150
+ $content-bg-color-alt4: $content-bg-color-alt4 !default;
1151
+ $content-bg-color-alt5: $content-bg-color-alt5 !default;
1152
+ $content-bg-color-hover: $content-bg-color-hover !default;
1153
+ $content-bg-color-pressed: $content-bg-color-pressed !default;
1154
+ $content-bg-color-focus: $content-bg-color-focus !default;
1155
+ $content-bg-color-selected: $content-bg-color-selected !default;
1156
+ $content-bg-color-dragged: $content-bg-color-dragged !default;
1157
+ $content-bg-color-disabled: $content-bg-color-disabled !default;
1158
+ $flyout-bg-color: $flyout-bg-color !default;
1159
+ $flyout-bg-color-hover: $flyout-bg-color-hover !default;
1160
+ $flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
1161
+ $flyout-bg-color-focus: $flyout-bg-color-focus !default;
1162
+ $overlay-bg-color: rgba($overlay-bg, .5) !default;
1163
+ $table-bg-color-hover: $table-bg-color-hover !default;
1164
+ $table-bg-color-pressed: $table-bg-color-pressed !default;
1165
+ $table-bg-color-selected: $table-bg-color-selected !default;
1166
+
1167
+ // all theme common color
1168
+ $colorpicker-gradient-1: #f00 !default;
1169
+ $colorpicker-gradient-2: #ff0 !default;
1170
+ $ccolorpicker-gradient-3: #0f0 !default;
1171
+ $colorpicker-gradient-4: #0ff !default;
1172
+ $colorpicker-gradient-5: #00f !default;
1173
+ $colorpicker-gradient-6: #f0f !default;
1174
+ $colorpicker-gradient-7: #ff0004 !default;
1175
+ $spreadsheet-selection-1: #673ab8 !default;
1176
+ $spreadsheet-selection-2: #9c27b0 !default;
1177
+ $spreadsheet-selection-3: #029688 !default;
1178
+ $spreadsheet-selection-4: #4caf51 !default;
1179
+ $spreadsheet-selection-5: #fe9800 !default;
1180
+ $spreadsheet-selection-6: #3f52b5 !default;
1181
+
1182
+ // text-color
1183
+ $content-text-color: $content-text-color !default;
1184
+ $content-text-color-alt1: $content-text-color-alt1 !default;
1185
+ $content-text-color-alt2: $content-text-color-alt2 !default;
1186
+ $content-text-color-alt3: $content-text-color-alt3 !default;
1187
+ $content-text-color-hover: $content-text-color-hover !default;
1188
+ $content-text-color-pressed: $content-text-color-pressed !default;
1189
+ $content-text-color-focus: $content-text-color-focus !default;
1190
+ $content-text-color-selected: $content-text-color-selected !default;
1191
+ $content-text-color-dragged: $content-text-color-dragged !default;
1192
+ $content-text-color-disabled: $content-text-color-disabled !default;
1193
+ $placeholder-text-color: $placeholder-text-color !default;
1194
+ $flyout-text-color: $flyout-text-color !default;
1195
+ $flyout-text-color-hover: $flyout-text-color-hover !default;
1196
+ $flyout-text-color-pressed: $flyout-text-color-pressed !default;
1197
+ $flyout-text-color-focus: $flyout-text-color-focus !default;
1198
+ $table-text-color-hover: $table-text-color-hover !default;
1199
+ $table-text-color-pressed: $table-text-color-pressed !default;
1200
+ $table-text-color-selected: $table-text-color-selected !default;
1201
+
1202
+ // icon-color
1203
+ $icon-color: $icon-color !default;
1204
+ $icon-color-hover: $icon-color-hover !default;
1205
+ $icon-color-pressed: $icon-color-pressed !default;
1206
+ $icon-color-disabled: $icon-color-disabled !default;
1207
+
1208
+ // close-icon-color
1209
+ $close-icon-color: $close-icon-color !default;
1210
+ $close-icon-color-hover: $close-icon-color-hover !default;
1211
+ $close-icon-color-pressed: $close-icon-color-pressed !default;
1212
+ $close-icon-color-disabled: $close-icon-color-disabled !default;
1213
+
1214
+ // border-color
1215
+ $border-light: $border-light !default;
1216
+ $border: $border !default;
1217
+ $border-dark: $border-dark !default;
1218
+ $border-hover: $border-hover !default;
1219
+ $border-pressed: $border-pressed !default;
1220
+ $border-focus: $border-focus !default;
1221
+ $border-selected: $border-selected !default;
1222
+ $border-dragged: $border-dragged !default;
1223
+ $border-disabled: $border-disabled !default;
1224
+ $border-warning: $border-warning !default;
1225
+ $border-error: $border-error !default;
1226
+ $border-success: $border-success !default;
1227
+ $spreadsheet-gridline: $spreadsheet-gridline !default;
1228
+ $flyout-border: $flyout-border !default;
1229
+
1230
+ // Tooltip
1231
+ $tooltip-bg-color: $tooltip-bg-color !default;
1232
+ $tooltip-border: $tooltip-border !default;
1233
+ $tooltip-text-color: $tooltip-text-color !default;
1234
+
1235
+ // shadow
1236
+ $shadow: 0 .8px 16px rgba($black, .15) !default;
1237
+ $shadow-sm: 0 2px 4px rgba($black, .075) !default;
1238
+ $shadow-md: 0 8px 12px rgba($black, .15) !default;
1239
+ $shadow-lg: 0 16px 48px rgba($black, .175) !default;
1240
+ $shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
1241
+ $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
1242
+ $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
1243
+ $shadow-none: 0 0 rgba($black, 0) !default;
1244
+ $shadow-focus-ring1: 0 0 0 4px rgba($primary-shadow, .25) !default;
1245
+ $shadow-focus-ring2: 0 0 0 4px rgba($primary-shadow, .25) !default;
1246
+ $primary-shadow-focus: 0 0 0 4px rgba($primary-shadow, .5) !default;
1247
+ $secondary-shadow-focus: 0 0 0 4px rgba($secondary-shadow, .5) !default;
1248
+ $success-shadow-focus: 0 0 0 4px rgba($success-shadow, .5) !default;
1249
+ $danger-shadow-focus: 0 0 0 4px rgba($danger-shadow, .5) !default;
1250
+ $info-shadow-focus: 0 0 0 4px rgba($info-shadow, .5) !default;
1251
+ $warning-shadow-focus: 0 0 0 4px rgba($warning-shadow, .5) !default;
1252
+ $keyboard-focus-shadow: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $shadow-color1 !default;
1253
+
1254
+ // fontfamily
1255
+ $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji' !default;
1256
+
1257
+ // default font Size
1258
+ $text-xxs: 10px !default;
1259
+ $text-xs: 12px !default;
1260
+ $text-sm: 14px !default;
1261
+ $text-base: 16px !default;
1262
+ $text-lg: 18px !default;
1263
+ $text-xl: 20px !default;
1264
+ $text-2xl: 24px !default;
1265
+ $text-3xl: 30px !default;
1266
+ $text-4xl: 36px !default;
1267
+ $text-5xl: 48px !default;
1268
+ $text-6xl: 60px !default;
1269
+ $text-7xl: 72px !default;
1270
+ $text-8xl: 96px !default;
1271
+ $text-9xl: 128px !default;
1272
+
1273
+ // heading
1274
+ $h1-font-size: 40px !default;
1275
+ $h2-font-size: 32px !default;
1276
+ $h3-font-size: 28px !default;
1277
+ $h4-font-size: $text-2xl !default;
1278
+ $h5-font-size: $text-xl !default;
1279
+ $h6-font-size: $text-base !default;
1280
+
1281
+ // display
1282
+
1283
+ // Line height
1284
+ $leading-none: 1 !default;
1285
+ $leading-tight: 1.25 !default;
1286
+ $leading-snug: 1.375 !default;
1287
+ $leading-normal: 1.5 !default;
1288
+ $leading-relaxed: 1.625 !default;
1289
+ $leading-loose: 2 !default;
1290
+
1291
+ // font Weight
1292
+ $font-weight: 400 !default;
1293
+ $font-weight-lighter: lighter !default;
1294
+ $font-weight-light: 300 !default;
1295
+ $font-weight-normal: 400 !default;
1296
+ $font-weight-medium: 500 !default;
1297
+ $font-weight-bold: 700 !default;
1298
+ $font-weight-bolder: bolder !default;
1299
+
1300
+ // Secondary-button
1301
+ $secondary-bg-color: $secondary-bg-color !default;
1302
+ $secondary-border-color: $secondary-border-color !default;
1303
+ $secondary-text-color: $secondary-text-color !default;
1304
+ $secondary-bg-color-hover: $secondary-bg-color-hover !default;
1305
+ $secondary-border-color-hover: $secondary-border-color-hover !default;
1306
+ $secondary-text-color-hover: $secondary-text-color-hover !default;
1307
+ $secondary-bg-color-pressed: $secondary-bg-color-pressed !default;
1308
+ $secondary-border-color-pressed: $secondary-border-color-pressed !default;
1309
+ $secondary-text-color-pressed: $secondary-text-color-pressed !default;
1310
+ $secondary-bg-color-focus: $secondary-bg-color-focus !default;
1311
+ $secondary-border-color-focus: $secondary-border-color-focus !default;
1312
+ $secondary-text-color-focus: $secondary-text-color-focus !default;
1313
+ $secondary-bg-color-disabled: $secondary-bg-color-disabled !default;
1314
+ $secondary-border-color-disabled: $secondary-bg-color-disabled !default;
1315
+ $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
1316
+
1317
+ // Primary-button
1318
+
1319
+ $primary-bg-color: rgba($primary-bg-color, 1) !default;
1320
+ $primary-border-color: $primary-border-color !default;
1321
+ $primary-text: $primary-text !default;
1322
+ $primary-bg-color-hover: $primary-bg-color-hover !default;
1323
+ $primary-border-color-hover: $primary-border-color-hover !default;
1324
+ $primary-text-hover: $primary-text-hover !default;
1325
+ $primary-bg-color-pressed: $primary-bg-color-pressed !default;
1326
+ $primary-border-color-pressed: $primary-border-color-pressed !default;
1327
+ $primary-text-pressed: $primary-text-pressed !default;
1328
+ $primary-bg-color-focus: $primary-bg-color-focus !default;
1329
+ $primary-border-color-focus: $primary-border-color-focus !default;
1330
+ $primary-text-focus: $primary-text-focus !default;
1331
+ $primary-bg-color-disabled: $primary-bg-color-disabled !default;
1332
+ $primary-border-color-disabled: $primary-border-color-disabled !default;
1333
+ $primary-text-disabled: $primary-text-disabled !default;
1334
+
1335
+ // Success-button
1336
+ $success-bg-color: rgba($success-bg-color, 1) !default;
1337
+ $success-border-color: $success-border-color !default;
1338
+ $success-text: $success-text !default;
1339
+ $success-bg-color-hover: $success-bg-color-hover !default;
1340
+ $success-border-color-hover: $success-border-color-hover !default;
1341
+ $success-text-hover: $success-text-hover !default;
1342
+ $success-bg-color-pressed: $success-bg-color-pressed !default;
1343
+ $success-border-color-pressed: $success-border-color-pressed !default;
1344
+ $success-text-pressed: $success-text-pressed !default;
1345
+ $success-bg-color-focus: $success-bg-color-focus !default;
1346
+ $success-border-color-focus: $success-border-color-focus !default;
1347
+ $success-text-focus: $success-text-focus !default;
1348
+ $success-bg-color-disabled: $success-bg-color-disabled !default;
1349
+ $success-border-color-disabled: $success-border-color-disabled !default;
1350
+ $success-text-disabled: $success-text-disabled !default;
1351
+
1352
+ // Warning-button
1353
+ $warning-bg-color: rgba($warning-bg-color, 1) !default;
1354
+ $warning-border-color: $warning-border-color !default;
1355
+ $warning-text: $warning-text !default;
1356
+ $warning-bg-color-hover: $warning-bg-color-hover !default;
1357
+ $warning-border-color-hover: $warning-border-color-hover !default;
1358
+ $warning-text-hover: $warning-text-hover !default;
1359
+ $warning-bg-color-pressed: $warning-bg-color-pressed !default;
1360
+ $warning-border-color-pressed: $warning-border-color-pressed !default;
1361
+ $warning-text-pressed: $warning-text-pressed !default;
1362
+ $warning-bg-color-focus: $warning-bg-color-focus !default;
1363
+ $warning-border-color-focus: $warning-border-color-focus !default;
1364
+ $warning-text-focus: $warning-text-focus !default;
1365
+ $warning-bg-color-disabled: $warning-bg-color-disabled !default;
1366
+ $warning-border-color-disabled: $warning-border-color-disabled !default;
1367
+ $warning-text-disabled: $warning-text-disabled !default;
1368
+
1369
+ // Info-button
1370
+ $info-bg-color: rgba($info-bg-color, 1) !default;
1371
+ $info-border-color: $info-border-color !default;
1372
+ $info-text: $info-text !default;
1373
+ $info-bg-color-hover: $info-bg-color-hover !default;
1374
+ $info-border-color-hover: $info-border-color-hover !default;
1375
+ $info-text-hover: $info-text-hover !default;
1376
+ $info-bg-color-pressed: $info-bg-color-pressed !default;
1377
+ $info-border-color-pressed: $info-border-color-pressed !default;
1378
+ $info-text-pressed: $info-text-pressed !default;
1379
+ $info-bg-color-focus: $info-bg-color-focus !default;
1380
+ $info-border-color-focus: $info-border-color-focus !default;
1381
+ $info-text-focus: $info-text-focus !default;
1382
+ $info-bg-color-disabled: $info-bg-color-disabled !default;
1383
+ $info-border-color-disabled: $info-border-color-disabled !default;
1384
+ $info-text-disabled: $info-text-disabled !default;
1385
+
1386
+ // danger-button
1387
+ $danger-bg-color: rgba($danger-bg-color, 1) !default;
1388
+ $danger-border-color: $danger-border-color !default;
1389
+ $danger-text: $danger-text !default;
1390
+ $danger-bg-color-hover: $danger-bg-color-hover !default;
1391
+ $danger-border-color-hover: $danger-border-color-hover !default;
1392
+ $danger-text-hover: $danger-text-hover !default;
1393
+ $danger-bg-color-pressed: $danger-bg-color-pressed !default;
1394
+ $danger-border-color-pressed: $danger-border-color-pressed !default;
1395
+ $danger-text-pressed: $danger-text-pressed !default;
1396
+ $danger-bg-color-focus: $danger-bg-color-focus !default;
1397
+ $danger-border-color-focus: $danger-border-color-focus !default;
1398
+ $danger-text-focus: $danger-text-focus !default;
1399
+ $danger-bg-color-disabled: $danger-bg-color-disabled !default;
1400
+ $danger-border-color-disabled: $danger-border-color-disabled !default;
1401
+ $danger-text-disabled: $danger-text-disabled !default;
1402
+
1403
+ //Outline button
1404
+ $primary-outline: $primary-outline !default;
1405
+ $secondary-outline: $secondary-outline !default;
1406
+ $warning-outline: $warning-outline !default;
1407
+ $danger-outline: $danger-outline !default;
1408
+ $success-outline: $success-outline !default;
1409
+ $info-outline: $info-outline !default;
1410
+
1411
+ // chart series
1412
+ $series-1: #e9ecef;
1413
+ $series-2: #dee2e6;
1414
+ $series-3: #ced4da;
1415
+ $series-4: $gray-800;
1416
+ $series-5: #1f2937;
1417
+ $series-6: #5e6e22;
1418
+ $series-7: #978a2b;
1419
+ $series-8: #6a4314;
1420
+ $series-9: #52236c;
1421
+ $series-10: #3a6b6f;
1422
+ $series-11: #d64f56;
1423
+ $series-12: #f3a93c;
1424
+ $skin-name: 'bootstrap5.3' !default;
1425
+ $theme-name: 'bootstrap5.3' !default;
1426
+
1427
+ //diagram Palette color
1428
+ $diagram-palette-background: $diagram-palette-background !default;
1429
+ $diagram-palette-hover-background: $diagram-palette-hover-background !default;
1430
+
1431
+ //Message component
1432
+
1433
+ //Message component
1434
+
1435
+ //Message default
1436
+ $msg-color: $msg-color !default;
1437
+ $msg-bg-color: $msg-bg-color !default;
1438
+ $msg-border-color: $msg-border-color !default;
1439
+ $msg-color-alt1: $msg-color-alt1 !default;
1440
+ $msg-bg-color-alt1: $msg-bg-color-alt1 !default;
1441
+ $msg-border-color-alt1: $msg-border-color-alt1 !default;
1442
+ $msg-color-alt2: $msg-color-alt2 !default;
1443
+ $msg-bg-color-alt2: $msg-bg-color-alt2 !default;
1444
+ $msg-border-color-alt2: $msg-border-color-alt2 !default;
1445
+ $msg-icon-color: $msg-icon-color !default;
1446
+ $msg-icon-color-alt1: $msg-icon-color-alt1 !default;
1447
+ $msg-icon-color-alt2: $msg-icon-color-alt2 !default;
1448
+
1449
+ $msg-close-icon-color: $msg-close-icon-color !default;
1450
+ $msg-close-icon-color-alt1: $msg-close-icon-color-alt21 !default;
1451
+ $msg-close-icon-color-alt2: $msg-close-icon-color-alt2 !default;
1452
+
1453
+ //Message success
1454
+ $msg-success-color: $msg-success-color !default;
1455
+ $msg-success-bg-color: $msg-success-bg-color !default;
1456
+ $msg-success-border-color: $msg-success-border-color !default;
1457
+ $msg-success-color-alt1: $msg-success-color-alt1 !default;
1458
+ $msg-success-bg-color-alt1: $msg-success-bg-color-alt1 !default;
1459
+ $msg-success-border-color-alt1: $msg-success-border-color-alt1 !default;
1460
+ $msg-success-color-alt2: $msg-success-color-alt2 !default;
1461
+ $msg-success-bg-color-alt2: $msg-success-bg-color-alt2 !default;
1462
+ $msg-success-border-color-alt2: $msg-success-border-color-alt2 !default;
1463
+ $msg-success-icon-color: $msg-success-icon-color !default;
1464
+ $msg-success-icon-color-alt1: $msg-success-icon-color-alt1 !default;
1465
+ $msg-success-icon-color-alt2: $msg-success-icon-color-alt2 !default;
1466
+ $msg-success-close-icon-color: $msg-success-close-icon-color !default;
1467
+ $msg-success-close-icon-color-alt1: $msg-success-close-icon-color-alt1 !default;
1468
+ $msg-success-close-icon-color-alt2: $msg-success-close-icon-color-alt2 !default;
1469
+
1470
+ //Message danger
1471
+ $msg-danger-color: $msg-danger-color !default;
1472
+ $msg-danger-bg-color: $msg-danger-bg-color !default;
1473
+ $msg-danger-border-color: $msg-danger-border-color !default;
1474
+ $msg-danger-color-alt1: $msg-danger-color-alt1 !default;
1475
+ $msg-danger-bg-color-alt1: $msg-danger-bg-color-alt1 !default;
1476
+ $msg-danger-border-color-alt1: $msg-danger-border-color-alt1 !default;
1477
+ $msg-danger-color-alt2: $msg-danger-color-alt2 !default;
1478
+ $msg-danger-bg-color-alt2: $msg-danger-bg-color-alt2 !default;
1479
+ $msg-danger-border-color-alt2: $msg-danger-border-color-alt2 !default;
1480
+ $msg-danger-icon-color: $msg-danger-icon-color !default;
1481
+ $msg-danger-icon-color-alt1: $msg-danger-icon-color-alt1 !default;
1482
+ $msg-danger-icon-color-alt2: $msg-danger-icon-color-alt2 !default;
1483
+ $msg-danger-close-icon-color: $msg-danger-close-icon-color !default;
1484
+ $msg-danger-close-icon-color-alt1: $msg-danger-close-icon-color-alt1 !default;
1485
+ $msg-danger-close-icon-color-alt2: $msg-danger-close-icon-color-alt2 !default;
1486
+
1487
+ //Message Info
1488
+ $msg-info-color: $msg-info-color !default;
1489
+ $msg-info-bg-color: $msg-info-bg-color !default;
1490
+ $msg-info-border-color: $msg-info-border-color !default;
1491
+ $msg-info-color-alt1: $msg-info-color-alt1 !default;
1492
+ $msg-info-bg-color-alt1: $msg-info-bg-color-alt1 !default;
1493
+ $msg-info-border-color-alt1: $msg-info-border-color-alt1 !default;
1494
+ $msg-info-color-alt2: $msg-info-color-alt2 !default;
1495
+ $msg-info-bg-color-alt2: $msg-info-bg-color-alt2 !default;
1496
+ $msg-info-border-color-alt2: $msg-info-border-color-alt2 !default;
1497
+ $msg-info-icon-color: $msg-info-icon-color !default;
1498
+ $msg-info-icon-color-alt1: $msg-info-icon-color-alt1 !default;
1499
+ $msg-info-icon-color-alt2: $msg-info-icon-color-alt2 !default;
1500
+ $msg-info-close-icon-color: $msg-info-close-icon-color !default;
1501
+ $msg-info-close-icon-color-alt1: $msg-info-close-icon-color-alt1 !default;
1502
+ $msg-info-close-icon-color-alt2: $msg-info-close-icon-color-alt2 !default;
1503
+
1504
+ //Message Warning
1505
+ $msg-warning-color: $msg-warning-color !default;
1506
+ $msg-warning-bg-color: $msg-warning-bg-color !default;
1507
+ $msg-warning-border-color: $msg-warning-border-color !default;
1508
+ $msg-warning-color-alt1: $msg-warning-color-alt1 !default;
1509
+ $msg-warning-bg-color-alt1: $msg-warning-bg-color-alt1 !default;
1510
+ $msg-warning-border-color-alt1: $msg-warning-border-color-alt1 !default;
1511
+ $msg-warning-color-alt2: $msg-warning-color-alt2 !default;
1512
+ $msg-warning-bg-color-alt2: $msg-warning-bg-color-alt2 !default;
1513
+ $msg-warning-border-color-alt2: $msg-warning-border-color-alt2 !default;
1514
+ $msg-warning-icon-color: $msg-warning-icon-color !default;
1515
+ $msg-warning-icon-color-alt1: $msg-warning-icon-color-alt1 !default;
1516
+ $msg-warning-icon-color-alt2: $msg-warning-icon-color-alt2 !default;
1517
+ $msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
1518
+ $msg-warning-close-icon-color-alt1: $msg-warning-close-icon-color-alt1 !default;
1519
+ $msg-warning-close-icon-color-alt2: $msg-warning-close-icon-color-alt2 !default;
1520
+
1521
+ //app bar
1522
+ //Light
1523
+ $appbar-bg-color-alt1: $appbar-bg-color-alt1 !default;
1524
+ $appbar-color-alt1: $appbar-color-alt1 !default;
1525
+ $appbar-border-color-alt1: $appbar-border-color-alt1 !default;
1526
+ $appbar-hover-bg-color-alt1: $appbar-hover-bg-color-alt1 !default;
1527
+
1528
+ //dark
1529
+ $appbar-bg-color-alt2: $appbar-bg-color-alt2 !default;
1530
+ $appbar-color-alt2: $appbar-color-alt2 !default;
1531
+ $appbar-border-color-alt2: $appbar-border-color-alt2 !default;
1532
+ $appbar-hover-bg-color-alt2: $appbar-hover-bg-color-alt2 !default;
1533
+
1534
+ //shadow
1535
+ $appbar-bottom-shadow: none !default;
1536
+ $appbar-top-shadow: none !default;
1537
+
1538
+ //rating
1539
+ $rating-selected-color: $rating-selected-color !default;
1540
+ $rating-unrated-color: $rating-unrated-color !default;
1541
+ $rating-selected-disabled-color: $rating-selected-disabled-color !default;
1542
+ $rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
1543
+ $rating-selected-hover-color: $rating-selected-hover-color !default;
1544
+ $rating-unrated-hover-color: $rating-unrated-hover-color !default;
1545
+ $rating-pressed-color: $rating-pressed-color !default;
1546
+
1547
+ //font-icons
1548
+ $font-icon-8: 8px !default;
1549
+ $font-icon-9: 9px !default;
1550
+ $font-icon-10: 10px !default;
1551
+ $font-icon-12: 12px !default;
1552
+ $font-icon-13: 13px !default;
1553
+ $font-icon-14: 14px !default;
1554
+ $font-icon-15: 15px !default;
1555
+ $font-icon-16: 16px !default;
1556
+ $font-icon-17: 17px !default;
1557
+ $font-icon-18: 18px !default;
1558
+ $font-icon-20: 20px !default;
1559
+ $font-icon-22: 22px !default;
1560
+ $font-icon-24: 24px !default;
1561
+ $font-icon-26: 26px !default;
1562
+ $font-icon-28: 28px !default;
1563
+ $font-icon-32: 32px !default;
1564
+ $accordion-text-active-color: $primary-darker !default;
1565
+
1566
+ //badge
1567
+ $badge-light-bg-color: $badge-light-bg-color;
1568
+ $badge-light-border-color: $badge-light-border-color;
1569
+ $badge-light-text-color: $badge-light-text-color;
1570
+ $badge-dark-bg-color: $badge-dark-bg-color;
1571
+ $badge-dark-border-color: $badge-dark-border-color;
1572
+ $badge-dark-text-color: $badge-dark-text-color;
1573
+
1574
+ $tab-border: $tab-border;
1575
+ $stepper:$stepper;
1576
+
1577
+ //frozen
1578
+ $frozen-shadow: rgba(0, 0, 0, .12) !default;
1579
+ $frozen-shadow-2: rgba(0, 0, 0, .12) !default;