@syncfusion/ej2-base 26.2.10 → 27.1.50

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 (84) hide show
  1. package/README.md +1 -1
  2. package/bin/syncfusion-license.js +1 -1
  3. package/dist/ej2-base.min.js +2 -2
  4. package/dist/ej2-base.umd.min.js +2 -2
  5. package/dist/ej2-base.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-base.es2015.js +3 -3
  7. package/dist/es6/ej2-base.es2015.js.map +1 -1
  8. package/dist/es6/ej2-base.es5.js +3 -3
  9. package/dist/es6/ej2-base.es5.js.map +1 -1
  10. package/dist/global/ej2-base.min.js +2 -2
  11. package/dist/global/ej2-base.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +11 -7
  14. package/src/component.js +1 -1
  15. package/src/validate-lic.js +2 -2
  16. package/styles/bootstrap-dark-lite.css +3634 -0
  17. package/styles/bootstrap-dark-lite.scss +3 -0
  18. package/styles/bootstrap-dark.css +70 -1
  19. package/styles/bootstrap-lite.css +3634 -0
  20. package/styles/bootstrap-lite.scss +3 -0
  21. package/styles/bootstrap.css +70 -1
  22. package/styles/bootstrap4-lite.css +3284 -0
  23. package/styles/bootstrap4-lite.scss +3 -0
  24. package/styles/bootstrap4.css +67 -1
  25. package/styles/bootstrap5-dark-lite.css +2857 -0
  26. package/styles/bootstrap5-dark-lite.scss +3 -0
  27. package/styles/bootstrap5-dark.css +67 -1
  28. package/styles/bootstrap5-lite.css +2857 -0
  29. package/styles/bootstrap5-lite.scss +3 -0
  30. package/styles/bootstrap5.3-lite.css +3450 -0
  31. package/styles/bootstrap5.3-lite.scss +3 -0
  32. package/styles/bootstrap5.3.css +3450 -0
  33. package/styles/bootstrap5.3.scss +3 -0
  34. package/styles/bootstrap5.css +67 -1
  35. package/styles/definition/_bds-dark.scss +139 -25
  36. package/styles/definition/_bds.scss +201 -52
  37. package/styles/definition/_bootstrap5.3-dark.scss +912 -540
  38. package/styles/definition/_bootstrap5.3.scss +912 -826
  39. package/styles/definition/_fluent2-dark.scss +20 -6
  40. package/styles/definition/_fluent2-highcontrast.scss +45 -31
  41. package/styles/definition/_fluent2.scss +60 -34
  42. package/styles/fabric-dark-lite.css +3619 -0
  43. package/styles/fabric-dark-lite.scss +3 -0
  44. package/styles/fabric-dark.css +70 -1
  45. package/styles/fabric-lite.css +3619 -0
  46. package/styles/fabric-lite.scss +3 -0
  47. package/styles/fabric.css +70 -1
  48. package/styles/fluent-dark-lite.css +2857 -0
  49. package/styles/fluent-dark-lite.scss +3 -0
  50. package/styles/fluent-dark.css +67 -1
  51. package/styles/fluent-lite.css +2857 -0
  52. package/styles/fluent-lite.scss +3 -0
  53. package/styles/fluent.css +67 -1
  54. package/styles/fluent2-lite.css +3908 -0
  55. package/styles/fluent2-lite.scss +3 -0
  56. package/styles/fluent2.css +113 -30
  57. package/styles/highcontrast-light-lite.css +3610 -0
  58. package/styles/highcontrast-light-lite.scss +3 -0
  59. package/styles/highcontrast-light.css +70 -1
  60. package/styles/highcontrast-lite.css +3610 -0
  61. package/styles/highcontrast-lite.scss +3 -0
  62. package/styles/highcontrast.css +70 -1
  63. package/styles/material-dark-lite.css +3587 -0
  64. package/styles/material-dark-lite.scss +3 -0
  65. package/styles/material-dark.css +70 -1
  66. package/styles/material-lite.css +3587 -0
  67. package/styles/material-lite.scss +3 -0
  68. package/styles/material.css +70 -1
  69. package/styles/material3-dark-lite.css +2912 -0
  70. package/styles/material3-dark-lite.scss +3 -0
  71. package/styles/material3-dark.css +67 -1
  72. package/styles/material3-lite.css +2968 -0
  73. package/styles/material3-lite.scss +3 -0
  74. package/styles/material3.css +67 -1
  75. package/styles/offline-theme/material-dark.css +70 -1
  76. package/styles/offline-theme/material.css +70 -1
  77. package/styles/offline-theme/tailwind-dark.css +67 -1
  78. package/styles/offline-theme/tailwind.css +67 -1
  79. package/styles/tailwind-dark-lite.css +2858 -0
  80. package/styles/tailwind-dark-lite.scss +3 -0
  81. package/styles/tailwind-dark.css +67 -1
  82. package/styles/tailwind-lite.css +2858 -0
  83. package/styles/tailwind-lite.scss +3 -0
  84. package/styles/tailwind.css +67 -1
package/styles/definition/_bootstrap5.3-dark.scss CHANGED
@@ -1,43 +1,56 @@
1
1
  @import '../common/mixin.scss';
2
2
 
3
- :root {
3
+ @function mapcolorvariable($pallete-name){
4
+ @return var(#{'--color-sf-'+ $pallete-name});
5
+ }
6
+
7
+ @function shade-color($color, $percentage) {
8
+ @return mix($black, $color, $percentage);
9
+ }
10
+
11
+ @function tint-color($color, $percentage) {
12
+ @return mix($white, $color, $percentage);
13
+ }
14
+
15
+ :root{
4
16
  --color-sf-content-bg-color: #212529;
5
- --color-sf-content-bg-color-alt1: #282d31;
17
+ --color-sf-content-bg-color-alt1: #2b3035;
6
18
  --color-sf-content-bg-color-alt2: #343a40;
7
- --color-sf-content-bg-color-alt3: #dee2e6;
8
- --color-sf-content-bg-color-alt4: #6c757d;
19
+ --color-sf-content-bg-color-alt3: #495057;
20
+ --color-sf-content-bg-color-alt4: #1a1d20;
9
21
  --color-sf-content-bg-color-alt5: #adb5bd;
10
- --color-sf-content-bg-color-hover: #31373d;
11
- --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
22
+ --color-sf-content-bg-color-hover: #2b3035;
23
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
12
24
  --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
13
25
  --color-sf-content-bg-color-selected: #0d6efd;
14
26
  --color-sf-content-bg-color-dragged: #343a40;
15
- --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color);
16
- --color-sf-flyout-bg-color: #343a40;
17
- --color-sf-flyout-bg-color-hover: #444c54;
27
+ --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color-alt2);
28
+ --color-sf-flyout-bg-color: #212529;
29
+ --color-sf-flyout-bg-color-hover: #2b3035;
18
30
  --color-sf-flyout-bg-color-pressed: #0d6efd;
19
- --color-sf-flyout-bg-color-focus: #444c54;
20
- --color-sf-overlay-bg-color: rgba(#000000, .4);
21
- --color-sf-table-bg-color-hover: var(--color-sf-content-bg-color-hover);
22
- --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-pressed);
23
- --color-sf-table-bg-color-selected: #3c444b;
31
+ --color-sf-flyout-bg-color-focus: #2b3035;
32
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
33
+ --color-sf-table-bg-color-hover: rgba(255, 255, 255, .07);
34
+ --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
35
+ --color-sf-table-bg-color-selected: rgba(255, 255, 255, .1);
24
36
 
25
37
  // text-color
26
- --color-sf-content-text-color: #ffffff;
27
- --color-sf-content-text-color-alt1: #e9ecef;
28
- --color-sf-content-text-color-alt2: #ced4da;
29
- --color-sf-content-text-color-alt3: #7b848d;
30
- --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
38
+ --color-sf-content-text-color: #dee2e6;
39
+ --color-sf-content-text-color-alt1: rgba(222, 226, 230, .75);
40
+ --color-sf-content-text-color-alt2: rgba(222, 226, 230, .5);
41
+ --color-sf-content-text-color-alt3: rgba(222, 226, 230, .25);
42
+ --color-sf-content-text-color-hover: #fff;
31
43
  --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
32
- --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
44
+ --color-sf-content-text-color-focus: #fff;
33
45
  --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
34
- --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
35
- --color-sf-content-text-color-disabled: #6c757d;
46
+ --color-sf-content-text-color-dragged: #fff;
47
+ --color-sf-content-text-color-disabled: rgba(222, 226, 230, .75);
36
48
  --color-sf-placeholder-text-color: #6c757d;
37
49
  --color-sf-flyout-text-color: var(--color-sf-content-text-color);
38
50
  --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
39
51
  --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
40
52
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
53
+ --color-sf-flyout-text-color-disabled: rgba(222, 226, 230, .5);
41
54
  --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
42
55
  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
43
56
  --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
@@ -47,71 +60,61 @@
47
60
  --color-sf-icon-color-hover: #dee2e6;
48
61
  --color-sf-icon-color-pressed: #f8f9fa;
49
62
  --color-sf-icon-color-disabled: #adb5bd;
63
+
64
+ // close-icon-color
65
+ --color-sf-close-icon-color: rgba(255, 255, 255, .5);
66
+ --color-sf-close-icon-color-hover: rgba(255, 255, 255, .75);
67
+ --color-sf-close-icon-color-pressed: rgba(255, 255, 255, 1);
68
+ --color-sf-close-icon-color-disabled: rgba(255, 255, 255, .25);
50
69
 
51
70
  // border-color
52
71
  --color-sf-border-light: #495057;
53
- --color-sf-border: #6c757d;
54
- --color-sf-border-dark: #adb5bd;
72
+ --color-sf-border: #495057;
73
+ --color-sf-border-dark: #6c757d;
55
74
  --color-sf-border-hover: #495057;
56
- --color-sf-border-pressed: #6c757d;
57
- --color-sf-border-focus: var(--color-sf-border-hover);
58
- --color-sf-border-selected: var(--color-sf-border);
59
- --color-sf-border-dragged: var(--color-sf-border);
60
- --color-sf-border-disabled: var(--color-sf-border-light);
61
- --color-sf-border-warning: #ffca2b;
62
- --color-sf-border-error: #eb8c95;
63
- --color-sf-border-success: #2ed889;
75
+ --color-sf-border-pressed: #495057;
76
+ --color-sf-border-focus: #86d7fe;
77
+ --color-sf-border-selected: #86d7fe;
78
+ --color-sf-border-dragged: #495057;
79
+ --color-sf-border-disabled: #495057;
80
+ --color-sf-border-warning: #ffda6a;
81
+ --color-sf-border-error: #ea868f;
82
+ --color-sf-border-success: #75b798;
64
83
  --color-sf-spreadsheet-gridline: #dee2e6;
65
- --color-sf-flyout-border: var(--color-sf-border-hover);
84
+ --color-sf-flyout-border: rgba(255, 255, 255, .15);
66
85
 
67
86
  //sf Variables
68
- --color-sf-primary: #0d6efd;
69
- --color-sf-primary-text-color: #ffffff;
87
+ --color-sf-primary: rgba(13, 110, 253, 1);
88
+ --color-sf-primary-text-color: #fff;
70
89
  --color-sf-primary-light: #86b7fe;
71
90
  --color-sf-primary-lighter: #031633;
72
- --color-sf-secondary: #6c757d;
73
- --color-sf-success: #21b26f;
74
- --color-sf-info: #0dcaf0;
75
- --color-sf-warning: #ffc107;
76
- --color-sf-danger: #e4606d;
77
- --color-sf-success-light: #d1e7dd;
78
- --color-sf-info-light: #cff4fc;
79
- --color-sf-warning-light: #fff3cd;
80
- --color-sf-danger-light: #f8d7da;
81
- --color-sf-success-dark: #115c39;
82
- --color-sf-info-dark: #066477;
83
- --color-sf-warning-dark: #866500;
84
- --color-sf-danger-dark: #bd2130;
85
- --color-sf-success-light-alt: #09311e;
86
- --color-sf-info-light-alt: #066477;
87
- --color-sf-warning-light-alt: #a07e00;
88
- --color-sf-danger-light-alt: #7c151f;
89
- --color-sf-badge-primary-bg-color-darken: darken($primary, 10%);
90
- --color-sf-badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
91
- --color-sf-badge-success-bg-color-darken: darken($success-light, 10%);
92
- --color-sf-badge-danger-bg-color-darken: darken($danger-light, 10%);
93
- --color-sf-badge-warning-bg-color-darken: darken($warning-light, 10%);
94
- --color-sf-badge-info-bg-color-darken: darken($info-light, 10%);
95
- --color-sf-badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
96
- --color-sf-badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
97
- --color-sf-breadcrumb-item-hover-color: darken($primary-outline, 10%);
98
- --color-sf-breadcrumb-item-active-color: darken($primary-outline, 15%);
99
- --color-sf-breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
100
- --color-sf-calendar-yeardecade-selected-hover-bg: darken(primary-bg-color, 10%);
101
- --color-sf-calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
102
- --color-sf-tab-alt-wrap-hover-color: darken($secondary, 15%);
103
- --color-sf-treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
104
- --color-sf-de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
105
- --color-sf-de-toggle-border-color: darken($secondary-bg-color, 12.5%);
106
- --color-sf-de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
107
- --color-sf-de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
108
- --color-sf-de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
109
- --color-sf-connector-point-hover-color: darken($primary, 10%);
110
- --color-sf-gantt-connected-task: lighten($primary, 20%);
111
- --color-sf-gantt-active-parent-task: lighten($warning-text, 10%);
112
- --color-sf-schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
113
- --color-sf-timepicker-active-border-color: darken($gray-600, 10%);
114
- --color-sf-hdr-selection-border-color: darken($border-light, 8%);
91
+ --color-sf-primary-dark: #073ba6;
92
+ --color-sf-primary-darker: #6ea8fe;
93
+ --color-sf-secondary: rgba(108, 117, 125, 1);
94
+ --color-sf-success: rgba(25, 135, 84, 1);
95
+ --color-sf-info: rgba(13, 202, 240, 1);
96
+ --color-sf-warning: rgba(255, 193, 7, 1);
97
+ --color-sf-danger: rgba(220, 53, 69, 1);
98
+ --color-sf-success-light: #75b798;
99
+ --color-sf-info-light: #6edff6;
100
+ --color-sf-warning-light: #ffda6a;
101
+ --color-sf-danger-light: #ea868f;
102
+ --color-sf-success-dark: #75b798;
103
+ --color-sf-info-dark: #6edff6;
104
+ --color-sf-warning-dark: #ffda6a;
105
+ --color-sf-danger-dark: #ea868f;
106
+ --color-sf-success-light-alt: #051b11;
107
+ --color-sf-info-light-alt: #032830;
108
+ --color-sf-warning-light-alt: #332701;
109
+ --color-sf-danger-light-alt: #2c0b0e;
110
+ --color-sf-primary-shadow: 13, 110, 253;
111
+ --color-sf-secondary-shadow: 108, 117, 125;
112
+ --color-sf-success-shadow: 25, 135, 84;
113
+ --color-sf-info-shadow: 13, 202, 240;
114
+ --color-sf-warning-shadow: 255, 193, 7;
115
+ --color-sf-danger-shadow: 220, 53, 69;
116
+ --color-sf-black: 0, 0, 0;
117
+ --color-sf-white: 255, 255, 255;
115
118
 
116
119
  // Primary-button
117
120
  --color-sf-primary-bg-color: var(--color-sf-primary);
@@ -121,7 +124,7 @@
121
124
  --color-sf-primary-border-color-hover: #0a58ca;
122
125
  --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
123
126
  --color-sf-primary-bg-color-pressed: #0a58ca;
124
- --color-sf-primary-border-color-pressed: #0a53be;
127
+ --color-sf-primary-border-color-pressed: #0a58ca;
125
128
  --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
126
129
  --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
127
130
  --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
@@ -133,7 +136,7 @@
133
136
  // Secondary-button
134
137
  --color-sf-secondary-bg-color: var(--color-sf-secondary);
135
138
  --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
136
- --color-sf-secondary-text-color: #ffffff;
139
+ --color-sf-secondary-text-color: #fff;
137
140
  --color-sf-secondary-bg-color-hover: #5c636a;
138
141
  --color-sf-secondary-border-color-hover: #565e64;
139
142
  --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
@@ -150,12 +153,12 @@
150
153
  // Success-button
151
154
  --color-sf-success-bg-color: var(--color-sf-success);
152
155
  --color-sf-success-border-color: var(--color-sf-success-bg-color);
153
- --color-sf-success-text: #ffffff;
156
+ --color-sf-success-text: #fff;
154
157
  --color-sf-success-bg-color-hover: #157347;
155
158
  --color-sf-success-border-color-hover: #146c43;
156
159
  --color-sf-success-text-hover: var(--color-sf-success-text);
157
160
  --color-sf-success-bg-color-pressed: #146c43;
158
- --color-sf-success-border-color-pressed: #13653f;
161
+ --color-sf-success-border-color-pressed: #15803d;
159
162
  --color-sf-success-text-pressed: var(--color-sf-success-text);
160
163
  --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
161
164
  --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
@@ -167,7 +170,7 @@
167
170
  // Warning-button
168
171
  --color-sf-warning-bg-color: var(--color-sf-warning);
169
172
  --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
170
- --color-sf-warning-text: #000000;
173
+ --color-sf-warning-text: #000;
171
174
  --color-sf-warning-bg-color-hover: #ffca2c;
172
175
  --color-sf-warning-border-color-hover: #ffc720;
173
176
  --color-sf-warning-text-hover: var(--color-sf-warning-text);
@@ -184,7 +187,7 @@
184
187
  // Info-button
185
188
  --color-sf-info-bg-color: var(--color-sf-info);
186
189
  --color-sf-info-border-color: var(--color-sf-info-bg-color);
187
- --color-sf-info-text: #000000;
190
+ --color-sf-info-text: #000;
188
191
  --color-sf-info-bg-color-hover: #31d2f2;
189
192
  --color-sf-info-border-color-hover: #25cff2;
190
193
  --color-sf-info-text-hover: var(--color-sf-info-text);
@@ -201,7 +204,7 @@
201
204
  // danger-button
202
205
  --color-sf-danger-bg-color: var(--color-sf-danger);
203
206
  --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
204
- --color-sf-danger-text: #ffffff;
207
+ --color-sf-danger-text: #fff;
205
208
  --color-sf-danger-bg-color-hover: #bb2d3b;
206
209
  --color-sf-danger-border-color-hover: #b02a37;
207
210
  --color-sf-danger-text-hover: var(--color-sf-danger-text);
@@ -216,143 +219,531 @@
216
219
  --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
217
220
 
218
221
  //Outline button
219
- --color-sf-primary-outline: #408cfd;
220
- --color-sf-secondary-outline: #868e96;
221
- --color-sf-warning-outline: #ffce3a;
222
- --color-sf-danger-outline: #eb8c95;
223
- --color-sf-success-outline: #2ed889;
224
- --color-sf-info-outline: #3cd5f4;
222
+ --color-sf-primary-outline: var(--color-sf-primary-bg-color);
223
+ --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
224
+ --color-sf-warning-outline: var(--color-sf-warning-bg-color);
225
+ --color-sf-danger-outline: var(--color-sf-danger-bg-color);
226
+ --color-sf-success-outline: var(--color-sf-success-bg-color);
227
+ --color-sf-info-outline: var(--color-sf-info-bg-color);
225
228
 
226
229
  // Tooltip
227
- --color-sf-tooltip-bg-color: #e9ecef;
230
+ --color-sf-tooltip-bg-color: rgba(255, 255, 255, .9);
228
231
  --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
229
- --color-sf-toooltip-text-color: #212529;
232
+ --color-sf-tooltip-text-color: #212529;
230
233
 
231
234
  //Light
232
- --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
235
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
233
236
  --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
234
237
  --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
235
238
  --color-sf-appbar-hover-bg-color-alt1: $transparent;
236
239
 
237
240
  //dark
238
- --color-sf-appbar-bg-color-alt2: var(--color-sf-content-bg-color-alt3);
241
+ --color-sf-appbar-bg-color-alt2: #dee2e6;
239
242
  --color-sf-appbar-color-alt2: #212529;
240
243
  --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
241
244
  --color-sf-appbar-hover-bg-color-alt2: $transparent;
242
245
 
243
246
  //diagram Palette color
244
- --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt3);
247
+ --color-sf-diagram-palette-background: #dee2e6;
245
248
  --color-sf-diagram-palette-hover-background: #ced4da;
249
+ --color-sf-diagram-palette-selected-color: #abb5bd;
246
250
 
247
251
  //rating
248
252
  --color-sf-rating-selected-color: var(--color-sf-primary);
249
- --color-sf-rating-unrated-color: var(--color-sf-content-bg-color-alt5);
250
- --color-sf-rating-selected-disabled-color: var(--color-sf-content-bg-color-alt4);
251
- --color-sf-rating-unrated-disabled-color: var(--color-sf-content-bg-color-alt3);
252
- --color-sf-rating-selected-hover-color: var(--color-sf-content-bg-color-alt5);
253
+ --color-sf-rating-unrated-color: #adb5bd;
254
+ --color-sf-rating-selected-disabled-color: #6c757d;
255
+ --color-sf-rating-unrated-disabled-color: #495057;
256
+ --color-sf-rating-selected-hover-color: #adb5bd;
253
257
  --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
254
258
  --color-sf-rating-pressed-color: #599bfe;
255
259
 
256
260
  //Message default
257
- --color-sf-msg-color: #ffffff;
258
- --color-sf-msg-bg-color: #3b4248;
259
- --color-sf-msg-border-color: #444c54;
260
- --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
261
+ --color-sf-msg-color: #a7acb1;
262
+ --color-sf-msg-bg-color: #161719;
263
+ --color-sf-msg-border-color: #41464b;
264
+ --color-sf-msg-color-alt1: var(--color-sf-msg-color);
261
265
  --color-sf-msg-bg-color-alt1: $transparent;
262
- --color-sf-msg-border-color-alt1: #9ca3af;
263
- --color-sf-msg-color-alt2: #ffffff;
264
- --color-sf-msg-bg-color-alt2: #444c54;
266
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
267
+ --color-sf-msg-color-alt2: #fff;
268
+ --color-sf-msg-bg-color-alt2: #6c757d;
265
269
  --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
266
- --color-sf-msg-icon-color: var(--color-sf-content-text-color);
267
- --color-sf-msg-icon-color-alt1: var(--color-sf-content-text-color);
268
- --color-sf-msg-icon-color-alt2: #ffffff;
269
- --color-sf-msg-close-icon-color: var(--color-sf-icon-color);
270
- --color-sf-msg-close-icon-color-alt1: var(--color-sf-icon-color);
271
- --color-sf-msg-close-icon-color-alt2: #ffffff;
270
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
271
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
272
+ --color-sf-msg-icon-color-alt2: #fff;
273
+ --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
274
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
275
+ --color-sf-msg-close-icon-color-alt2: #fff;
272
276
 
273
277
  //Message danger
274
- --color-sf-msg-danger-color: #fae3e5;
275
- --color-sf-msg-danger-bg-color: #66121a;
276
- --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-bg-color);
277
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
278
+ --color-sf-msg-danger-color: #ea868f;
279
+ --color-sf-msg-danger-bg-color: #2c0b0e;
280
+ --color-sf-msg-danger-border-color: #842029;
281
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
278
282
  --color-sf-msg-danger-bg-color-alt1: $transparent;
279
- --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-color-alt1);
280
- --color-sf-msg-danger-color-alt2: #212529;
281
- --color-sf-msg-danger-bg-color-alt2: var(--color-sf-danger);
283
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
284
+ --color-sf-msg-danger-color-alt2: #fff;
285
+ --color-sf-msg-danger-bg-color-alt2: #dc3545;
282
286
  --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
283
- --color-sf-msg-danger-icon-color: #fae3e5;
284
- --color-sf-msg-danger-icon-color-alt1: var(--color-sf-danger);
285
- --color-sf-msg-danger-icon-color-alt2: #212529;
286
- --color-sf-msg-danger-close-icon-color: var(--color-sf-icon-color);
287
- --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-icon-color);
288
- --color-sf-msg-danger-close-icon-color-alt2: #212529;
287
+ --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
288
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
289
+ --color-sf-msg-danger-icon-color-alt2: #fff;
290
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
291
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
292
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
289
293
 
290
294
  //Message success
291
- --color-sf-msg-success-color: #2ed889;
292
- --color-sf-msg-success-bg-color: #09311e;
293
- --color-sf-msg-success-border-color: #0b3a24;
294
- --color-sf-msg-success-color-alt1: #21b26f;
295
+ --color-sf-msg-success-color: #75b798;
296
+ --color-sf-msg-success-bg-color: #051b11;
297
+ --color-sf-msg-success-border-color: #0f5132;
298
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
295
299
  --color-sf-msg-success-bg-color-alt1: $transparent;
296
- --color-sf-msg-success-border-color-alt1: #21b26f;
297
- --color-sf-msg-success-color-alt2: #212529;
298
- --color-sf-msg-success-bg-color-alt2: #21b26f;
300
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
301
+ --color-sf-msg-success-color-alt2: #fff;
302
+ --color-sf-msg-success-bg-color-alt2: #198754;
299
303
  --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
300
- --color-sf-msg-success-icon-color: #2ed889;
301
- --color-sf-msg-success-icon-color-alt1: #21b26f;
302
- --color-sf-msg-success-icon-color-alt2: #212529;
303
- --color-sf-msg-success-close-icon-color: var(--color-sf-icon-color);
304
- --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-icon-color);
305
- --color-sf-msg-success-close-icon-color-alt2: #212529;
304
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
305
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
306
+ --color-sf-msg-success-icon-color-alt2: #fff;
307
+ --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
308
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
309
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
306
310
 
307
311
  //Message warning
308
- --color-sf-msg-warning-color: #ffeeb9;
309
- --color-sf-msg-warning-bg-color: #866500;
310
- --color-sf-msg-warning-border-color: #967000;
311
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
312
+ --color-sf-msg-warning-color: #ffda6a;
313
+ --color-sf-msg-warning-bg-color: #332701;
314
+ --color-sf-msg-warning-border-color: #997404;
315
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
312
316
  --color-sf-msg-warning-bg-color-alt1: $transparent;
313
- --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-color-alt1);
317
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
314
318
  --color-sf-msg-warning-color-alt2: #212529;
315
- --color-sf-msg-warning-bg-color-alt2: var(--color-sf-warning);
319
+ --color-sf-msg-warning-bg-color-alt2: #ffc107;
316
320
  --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
317
- --color-sf-msg-warning-icon-color: var(--color-sf-warning);
318
- --color-sf-msg-warning-icon-color-alt1: var(--color-sf-warning);
321
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
322
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
319
323
  --color-sf-msg-warning-icon-color-alt2: #212529;
320
- --color-sf-msg-warning-close-icon-color: var(--color-sf-icon-color);
321
- --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-icon-color);
324
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
325
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
322
326
  --color-sf-msg-warning-close-icon-color-alt2: #212529;
323
327
 
324
328
  //Message info
325
- --color-sf-msg-info-color: #84e5f8;
326
- --color-sf-msg-info-bg-color: #05505f;
327
- --color-sf-msg-info-border-color: #065c6d;
328
- --color-sf-msg-info-color-alt1: var(--color-sf-info);
329
+ --color-sf-msg-info-color: #6edff6;
330
+ --color-sf-msg-info-bg-color: #032830;
331
+ --color-sf-msg-info-border-color: #087990;
332
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
329
333
  --color-sf-msg-info-bg-color-alt1: $transparent;
330
- --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-color-alt1);
334
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
331
335
  --color-sf-msg-info-color-alt2: #212529;
332
- --color-sf-msg-info-bg-color-alt2: var(--color-sf-info);
333
- --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
334
- --color-sf-msg-info-icon-color: var(--color-sf-info);
335
- --color-sf-msg-info-icon-color-alt1: var(--color-sf-info);
336
+ --color-sf-msg-info-bg-color-alt2: #0dcaf0;
337
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
338
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
339
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
336
340
  --color-sf-msg-info-icon-color-alt2: #212529;
337
- --color-sf-msg-info-close-icon-color: var(--color-sf-icon-color);
338
- --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-icon-color);
341
+ --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
342
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
339
343
  --color-sf-msg-info-close-icon-color-alt2: #212529;
340
- }
341
344
 
342
- // black
343
- $black:#000 !default;
345
+ //badge
346
+ --color-sf-badge-light-bg-color: #faf9fa;
347
+ --color-sf-badge-light-border-color: #faf9fa;
348
+ --color-sf-badge-light-text-color: #000;
349
+ --color-sf-badge-dark-bg-color: #212529;
350
+ --color-sf-badge-dark-border-color: #212529;
351
+ --color-sf-badge-dark-text-color: #fff;
344
352
 
345
- // White
346
- $white:#fff !default;
353
+ //tab
354
+ --color-sf-tab-border: #343a40;
347
355
 
348
- @function shade-color($color, $percentage) {
349
- @return mix($black, $color, $percentage);
350
- }
356
+ //stepper
357
+ --color-sf-stepper: #212529;
351
358
 
352
- @function tint-color($color, $percentage) {
353
- @return mix($white, $color, $percentage);
359
+ --color-sf-shadow-color: #{#fff};
360
+ --color-sf-shadow-color1: #{#000};
354
361
  }
355
362
 
363
+ // backgroundcolor
364
+ $content-bg-color: mapcolorvariable('content-bg-color') !default;
365
+ $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
366
+ $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
367
+ $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
368
+ $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
369
+ $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
370
+ $content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
371
+ $content-bg-color-pressed: mapcolorvariable('content-bg-color-pressed') !default;
372
+ $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
373
+ $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
374
+ $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
375
+ $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
376
+ $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
377
+ $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
378
+ $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
379
+ $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
380
+ $overlay-bg: mapcolorvariable('overlay-bg-color');
381
+ $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
382
+ $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
383
+ $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
384
+
385
+ // text-color
386
+ $content-text-color: mapcolorvariable('content-text-color') !default;
387
+ $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
388
+ $content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
389
+ $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
390
+ $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
391
+ $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
392
+ $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
393
+ $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
394
+ $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
395
+ $content-text-color-disabled: mapcolorvariable('content-text-color-disabled') !default;
396
+ $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
397
+ $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
398
+ $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
399
+ $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
400
+ $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
401
+ $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
402
+ $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
403
+ $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
404
+
405
+ // icon-color
406
+ $icon-color: mapcolorvariable('icon-color') !default;
407
+ $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
408
+ $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
409
+ $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
410
+
411
+ // border-color
412
+ $border-light: mapcolorvariable('border-light') !default;
413
+ $border: mapcolorvariable('border') !default;
414
+ $border-dark: mapcolorvariable('border-dark') !default;
415
+ $border-hover: mapcolorvariable('border-hover') !default;
416
+ $border-pressed: mapcolorvariable('border-pressed') !default;
417
+ $border-focus: mapcolorvariable('border-focus') !default;
418
+ $border-selected: mapcolorvariable('border-selected') !default;
419
+ $border-dragged:mapcolorvariable('border-dragged') !default;
420
+ $border-disabled: mapcolorvariable('border-disabled') !default;
421
+ $border-warning: mapcolorvariable('border-warning') !default;
422
+ $border-error: mapcolorvariable('border-error') !default;
423
+ $border-success: mapcolorvariable('border-success') !default;
424
+ $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
425
+ $flyout-border: mapcolorvariable('flyout-border') !default;
426
+
427
+ //sf Variables
428
+ $primary: mapcolorvariable('primary') !default;
429
+ $secondary: mapcolorvariable('secondary') !default;
430
+ $primary-text-color: mapcolorvariable('primary-text-color') !default;
431
+ $primary-light: mapcolorvariable('primary-light') !default;
432
+ $primary-lighter: mapcolorvariable('primary-lighter') !default;
433
+ $success: mapcolorvariable('success') !default;
434
+ $info: mapcolorvariable('info') !default;
435
+ $warning: mapcolorvariable('warning') !default;
436
+ $danger: mapcolorvariable('danger') !default;
437
+ $success-light: mapcolorvariable('success-light') !default;
438
+ $info-light: mapcolorvariable('info-light') !default;
439
+ $warning-light: mapcolorvariable('warning-light') !default;
440
+ $danger-light: mapcolorvariable('danger-light') !default;
441
+ $success-dark: mapcolorvariable('success-dark') !default;
442
+ $info-dark: mapcolorvariable('info-dark') !default;
443
+ $warning-dark: mapcolorvariable('warning-dark') !default;
444
+ $danger-dark: mapcolorvariable('danger-dark') !default;
445
+ $success-light-alt: mapcolorvariable('success-light-alt') !default;
446
+ $info-light-alt: mapcolorvariable('info-light-alt') !default;
447
+ $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
448
+ $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
449
+
450
+ // Primary-button
451
+ $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
452
+ $primary-border-color: mapcolorvariable('primary-border-color') !default;
453
+ $primary-text: mapcolorvariable('primary-text') !default;
454
+ $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
455
+ $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
456
+ $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
457
+ $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
458
+ $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
459
+ $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
460
+ $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
461
+ $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
462
+ $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
463
+ $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
464
+ $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
465
+ $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
466
+
467
+ // Secondary-button
468
+ $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
469
+ $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
470
+ $secondary-text-color: mapcolorvariable('secondary-text-color') !default;
471
+ $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
472
+ $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
473
+ $secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
474
+ $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
475
+ $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
476
+ $secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
477
+ $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
478
+ $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
479
+ $secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
480
+ $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
481
+ $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
482
+ $secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
483
+
484
+ // Success-button
485
+ $success-bg-color: mapcolorvariable('success-bg-color') !default;
486
+ $success-border-color: mapcolorvariable('success-border-color') !default;
487
+ $success-text: mapcolorvariable('success-text') !default;
488
+ $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
489
+ $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
490
+ $success-text-hover: mapcolorvariable('success-text-hover') !default;
491
+ $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
492
+ $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
493
+ $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
494
+ $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
495
+ $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
496
+ $success-text-focus: mapcolorvariable('success-text-focus') !default;
497
+ $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
498
+ $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
499
+ $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
500
+
501
+ // Warning-button
502
+ $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
503
+ $warning-border-color: mapcolorvariable('warning-border-color') !default;
504
+ $warning-text: mapcolorvariable('warning-text') !default;
505
+ $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
506
+ $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
507
+ $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
508
+ $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
509
+ $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
510
+ $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
511
+ $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
512
+ $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
513
+ $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
514
+ $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
515
+ $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
516
+ $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
517
+
518
+ // Info-button
519
+ $info-bg-color: mapcolorvariable('info-bg-color') !default;
520
+ $info-border-color: mapcolorvariable('info-border-color') !default;
521
+ $info-text: mapcolorvariable('info-text') !default;
522
+ $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
523
+ $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
524
+ $info-text-hover: mapcolorvariable('info-text-hover') !default;
525
+ $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
526
+ $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
527
+ $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
528
+ $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
529
+ $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
530
+ $info-text-focus: mapcolorvariable('info-text-focus') !default;
531
+ $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
532
+ $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
533
+ $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
534
+
535
+ // danger-button
536
+ $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
537
+ $danger-border-color: mapcolorvariable('danger-border-color') !default;
538
+ $danger-text: mapcolorvariable('danger-text') !default;
539
+ $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
540
+ $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
541
+ $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
542
+ $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
543
+ $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
544
+ $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
545
+ $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
546
+ $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
547
+ $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
548
+ $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
549
+ $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
550
+ $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
551
+
552
+ //Outline button
553
+ $primary-outline: mapcolorvariable('primary-outline') !default;
554
+ $secondary-outline: mapcolorvariable('secondary-outline') !default;
555
+ $warning-outline: mapcolorvariable('warning-outline') !default;
556
+ $danger-outline: mapcolorvariable('danger-outline') !default;
557
+ $success-outline: mapcolorvariable('success-outline') !default;
558
+ $info-outline: mapcolorvariable('info-outline') !default;
559
+
560
+ // Tooltip
561
+ $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
562
+ $tooltip-border: mapcolorvariable('tooltip-border') !default;
563
+ $tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
564
+
565
+ //appbar
566
+ //Light
567
+ $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
568
+ $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
569
+ $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
570
+ $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
571
+
572
+ //dark
573
+ $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
574
+ $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
575
+ $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
576
+ $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
577
+
578
+ //diagram Palette color
579
+ $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
580
+ $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
581
+ $diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;
582
+
583
+ //rating
584
+ $rating-selected-color:mapcolorvariable('rating-selected-color') !default;
585
+ $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
586
+ $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
587
+ $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
588
+ $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color') !default;
589
+ $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
590
+ $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
591
+
592
+ //Message component
593
+
594
+ //Message default
595
+ $msg-color: mapcolorvariable('msg-color') !default;
596
+ $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
597
+ $msg-border-color:mapcolorvariable('msg-border-color') !default;
598
+ $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
599
+ $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
600
+ $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
601
+ $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
602
+ $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
603
+ $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
604
+ $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
605
+ $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
606
+ $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
607
+ $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
608
+ $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
609
+ $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2') !default;
610
+
611
+ //Message success
612
+ $msg-success-color: mapcolorvariable('msg-success-color') !default;
613
+ $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
614
+ $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
615
+ $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
616
+ $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
617
+ $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
618
+ $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
619
+ $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
620
+ $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
621
+ $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
622
+ $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
623
+ $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
624
+ $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
625
+ $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
626
+ $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
627
+
628
+ //Message danger
629
+ $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
630
+ $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
631
+ $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
632
+ $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
633
+ $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
634
+ $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
635
+ $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
636
+ $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
637
+ $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
638
+ $msg-danger-icon-color: mapcolorvariable('msg-danger-icon-color') !default;
639
+ $msg-danger-icon-color-alt1: mapcolorvariable('msg-danger-icon-color-alt1') !default;
640
+ $msg-danger-icon-color-alt2: mapcolorvariable('msg-danger-icon-color-alt2') !default;
641
+ $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
642
+ $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
643
+ $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
644
+
645
+ //Message Info
646
+ $msg-info-color: mapcolorvariable('msg-info-color') !default;
647
+ $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
648
+ $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
649
+ $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
650
+ $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
651
+ $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
652
+ $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
653
+ $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
654
+ $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
655
+ $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
656
+ $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
657
+ $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
658
+ $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
659
+ $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
660
+ $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
661
+
662
+ //Message Warning
663
+ $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
664
+ $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
665
+ $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
666
+ $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
667
+ $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
668
+ $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
669
+ $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
670
+ $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
671
+ $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
672
+ $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
673
+ $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
674
+ $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
675
+ $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
676
+ $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
677
+ $msg-warning-close-icon-color-alt2: mapcolorvariable('msg-warning-close-icon-color-alt2') !default;
678
+
679
+ //badge
680
+ $badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
681
+ $badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
682
+ $badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
683
+ $badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
684
+ $badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
685
+ $badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
686
+ $badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
687
+ $badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;
688
+
689
+ //breadcrumb
690
+ $breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
691
+ $breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
692
+ $breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;
693
+
694
+ //tab
695
+ $tab-alt-wrap-hover-color: mapcolorvariable('tab-alt-wrap-hover-color') !default;
696
+
697
+ //treeview
698
+ $treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;
699
+
700
+ //document editor
701
+ $de-style-btn-bg-color: mapcolorvariable('de-style-btn-bg-color') !default;
702
+ $de-toggle-border-color: mapcolorvariable('de-toggle-border-color') !default;
703
+ $de-toggle-hover-color: mapcolorvariable('de-toggle-hover-color') !default;
704
+ $de-toggle-border-hover-color: mapcolorvariable('de-toggle-border-hover-color') !default;
705
+ $de-toggle-disabled-color: mapcolorvariable('de-toggle-disabled-color') !default;
706
+ $connector-point-hover-color: mapcolorvariable('connector-point-hover-color') !default;
707
+ $gantt-connected-task: mapcolorvariable('gantt-connected-task') !default;
708
+ $gantt-active-parent-task: mapcolorvariable('gantt-active-parent-task') !default;
709
+ $timepicker-active-border-color: mapcolorvariable('timepicker-active-border-color') !default;
710
+ $hdr-selection-border-color: mapcolorvariable('hdr-selection-border-color') !default;
711
+
712
+ $primary-dark: mapcolorvariable('primary-dark') !default;
713
+ $primary-darker: mapcolorvariable('primary-darker') !default;
714
+ $flyout-text-color-disabled: mapcolorvariable('flyout-text-color-disabled') !default;
715
+ $close-icon-color: mapcolorvariable('close-icon-color') !default;
716
+ $close-icon-color-hover: mapcolorvariable('close-icon-color-hover') !default;
717
+ $close-icon-color-pressed: mapcolorvariable('close-icon-color-pressed') !default;
718
+ $close-icon-color-disabled: mapcolorvariable('close-icon-color-disabled') !default;
719
+
720
+ //badge
721
+ $badge-light-bg-color: mapcolorvariable('badge-light-bg-color') !default;
722
+ $badge-light-border-color: mapcolorvariable('badge-light-border-color') !default;
723
+ $badge-light-text-color: mapcolorvariable('badge-light-text-color') !default;
724
+ $badge-dark-bg-color: mapcolorvariable('badge-dark-bg-color') !default;
725
+ $badge-dark-border-color: mapcolorvariable('badge-dark-border-color') !default;
726
+ $badge-dark-text-color: mapcolorvariable('badge-dark-text-color') !default;
727
+
728
+ $tab-border: mapcolorvariable('tab-border') !default;
729
+ $stepper: mapcolorvariable('stepper') !default;
730
+
731
+ $primary-shadow: mapcolorvariable('primary-shadow') !default;
732
+ $secondary-shadow: mapcolorvariable('secondary-shadow') !default;
733
+ $success-shadow: mapcolorvariable('success-shadow') !default;
734
+ $danger-shadow: mapcolorvariable('danger-shadow') !default;
735
+ $info-shadow: mapcolorvariable('info-shadow') !default;
736
+ $warning-shadow: mapcolorvariable('warning-shadow') !default;
737
+
738
+ $shadow-color: mapcolorvariable('shadow-color') !default;
739
+ $shadow-color1: mapcolorvariable('shadow-color1') !default;
740
+
741
+ // black
742
+ $black: mapcolorvariable('black') !default;
743
+
744
+ // White
745
+ $white: mapcolorvariable('white') !default;
746
+
356
747
  // Transparent
357
748
  $transparent: transparent;
358
749
 
@@ -368,63 +759,62 @@ $gray-800: #343a40 !default;
368
759
  $gray-900: #212529 !default;
369
760
 
370
761
  // scss-docs-start color-variables
371
- $blue:#0d6efd !default;
372
- $indigo:#6610f2 !default;
373
- $purple:#6f42c1 !default;
374
- $pink:#d63384 !default;
375
- $red: #dc3545 !default;
376
- $orange:#fd7e14 !default;
377
- $yellow:#ffc107 !default;
378
- $green: #198754 !default;
379
- $teal:#20c997 !default;
380
- $cyan:#0dcaf0 !default;
381
-
382
- $primary: $blue !default;
383
- $secondary: $gray-600 !default;
384
- $success: lighten($green, 10%) !default;
385
- $info:$cyan !default;
386
- $warning: $yellow !default;
387
- $danger:lighten($red, 10%) !default;
388
- $success-light: tint-color($success, 80%) !default;
389
- $info-light:tint-color($info, 80%) !default;
390
- $warning-light: tint-color($warning, 80%) !default;
391
- $danger-light:tint-color($danger, 80%) !default;
392
- $primary-text-color: $white !default;
393
- $primary-light: tint-color($primary, 50%) !default;
394
- $primary-lighter: shade-color($primary, 80%) !default;
395
- $success-dark: darken($success, 10%) !default;
396
- $info-dark:darken($info, 25%) !default;
397
- $warning-dark: darken($warning, 25%) !default;
398
- $danger-dark:darken($danger, 10%) !default;
399
- $success-light-alt: darken($green, 20%) !default;
400
- $info-light-alt:darken($cyan, 25%) !default;
401
- $warning-light-alt: darken($yellow, 20%) !default;
402
- $danger-light-alt:darken($red, 25%) !default;
762
+ $blue: #0d6efd !default;
763
+ $indigo: #6610f2 !default;
764
+ $purple: #6f42c1 !default;
765
+ $pink: #d63384 !default;
766
+ $red: #dc3545 !default;
767
+ $orange: #fd7e14 !default;
768
+ $yellow: #ffc107 !default;
769
+ $green: #198754 !default;
770
+ $teal: #20c997 !default;
771
+ $cyan: #0dcaf0 !default;
772
+
773
+ $primary: $primary !default;
774
+ $secondary: $secondary !default;
775
+ $success: $success !default;
776
+ $info: $info !default;
777
+ $warning: $warning !default;
778
+ $danger: $danger !default;
779
+ $success-light: $success-light !default;
780
+ $info-light: $info-light !default;
781
+ $warning-light: $warning-light !default;
782
+ $danger-light: $danger-light !default;
783
+ $primary-text-color: $primary-text-color !default;
784
+ $primary-light: $primary-light !default;
785
+ $primary-lighter: $primary-lighter !default;
786
+ $success-dark: $success-dark !default;
787
+ $info-dark: $info-dark !default;
788
+ $warning-dark: $warning-dark !default;
789
+ $danger-dark: $danger-dark !default;
790
+ $success-light-alt: $success-light-alt !default;
791
+ $info-light-alt: $info-light-alt !default;
792
+ $warning-light-alt: $warning-light-alt !default;
793
+ $danger-light-alt: $danger-light-alt !default;
403
794
 
404
795
  // backgroundcolor
405
- $content-bg-color: $gray-900 !default;
406
- $content-bg-color-alt1: lighten($gray-900, 3%) !default;
407
- $content-bg-color-alt2: $gray-800 !default;
408
- $content-bg-color-alt3: $gray-700 !default;
409
- $content-bg-color-alt4: $gray-600 !default;
410
- $content-bg-color-alt5: $gray-500 !default;
411
- $content-bg-color-hover: lighten($content-bg-color, 7%) !default;
412
- $content-bg-color-pressed: $gray-700 !default;
413
- $content-bg-color-focus: $content-bg-color-hover !default;
414
- $content-bg-color-selected: $primary !default;
415
- $content-bg-color-dragged: $gray-800 !default;
416
- $content-bg-color-disabled: $content-bg-color !default;
417
- $flyout-bg-color: $gray-800 !default;
418
- $flyout-bg-color-hover: lighten($flyout-bg-color, 7%) !default;
419
- $flyout-bg-color-pressed: $primary !default;
420
- $flyout-bg-color-focus: $flyout-bg-color-hover !default;
421
- $flyout-border: $gray-700 !default;
796
+ $content-bg-color: $content-bg-color !default;
797
+ $content-bg-color-alt1: $content-bg-color-alt1 !default;
798
+ $content-bg-color-alt2: $content-bg-color-alt2 !default;
799
+ $content-bg-color-alt3: $content-bg-color-alt3 !default;
800
+ $content-bg-color-alt4: $content-bg-color-alt4 !default;
801
+ $content-bg-color-alt5: $content-bg-color-alt5 !default;
802
+ $content-bg-color-hover: $content-bg-color-hover !default;
803
+ $content-bg-color-pressed: $content-bg-color-pressed !default;
804
+ $content-bg-color-focus: $content-bg-color-focus !default;
805
+ $content-bg-color-selected: $content-bg-color-selected !default;
806
+ $content-bg-color-dragged: $content-bg-color-dragged !default;
807
+ $content-bg-color-disabled: $content-bg-color-disabled !default;
808
+ $flyout-bg-color: $flyout-bg-color !default;
809
+ $flyout-bg-color-hover: $flyout-bg-color-hover !default;
810
+ $flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
811
+ $flyout-bg-color-focus: $flyout-bg-color-focus !default;
422
812
  $overlay-bg-color: rgba($black, .4) !default;
423
- $table-bg-color-hover: lighten($content-bg-color, 7%) !default;
424
- $table-bg-color-pressed: $gray-700 !default;
425
- $table-bg-color-selected: lighten($content-bg-color, 12%) !default;
813
+ $table-bg-color-hover: $table-bg-color-hover !default;
814
+ $table-bg-color-pressed: $table-bg-color-pressed !default;
815
+ $table-bg-color-selected: $table-bg-color-selected !default;
426
816
 
427
- //All theme commoon color
817
+ // all theme common color
428
818
  $colorpicker-gradient-1: #f00 !default;
429
819
  $colorpicker-gradient-2: #ff0 !default;
430
820
  $ccolorpicker-gradient-3: #0f0 !default;
@@ -432,79 +822,87 @@ $colorpicker-gradient-4: #0ff !default;
432
822
  $colorpicker-gradient-5: #00f !default;
433
823
  $colorpicker-gradient-6: #f0f !default;
434
824
  $colorpicker-gradient-7: #ff0004 !default;
435
- $spreadsheet-selection-1: #673ab8;
436
- $spreadsheet-selection-2: #9c27b0;
437
- $spreadsheet-selection-3: #029688;
438
- $spreadsheet-selection-4: #4caf51;
439
- $spreadsheet-selection-5: #fe9800;
440
- $spreadsheet-selection-6: #3f52b5;
825
+ $spreadsheet-selection-1: #673ab8 !default;
826
+ $spreadsheet-selection-2: #9c27b0 !default;
827
+ $spreadsheet-selection-3: #029688 !default;
828
+ $spreadsheet-selection-4: #4caf51 !default;
829
+ $spreadsheet-selection-5: #fe9800 !default;
830
+ $spreadsheet-selection-6: #3f52b5 !default;
441
831
 
442
832
  // text-color
443
- $content-text-color: $white !default;
444
- $content-text-color-alt1: $gray-200 !default;
445
- $content-text-color-alt2: $gray-400 !default;
446
- $content-text-color-alt3: lighten($gray-600, 6%) !default;
447
- $content-text-color-hover: $white !default;
448
- $content-text-color-pressed: $white !default;
449
- $content-text-color-focus: $white !default;
450
- $content-text-color-selected: $primary-text-color !default;
451
- $content-text-color-dragged: $white !default;
452
- $content-text-color-disabled: $gray-600 !default;
453
- $placeholder-text-color: $gray-600 !default;
454
- $flyout-text-color: $white !default;
455
- $flyout-text-color-hover: $white !default;
456
- $flyout-text-color-pressed: $primary-text-color !default;
457
- $flyout-text-color-focus: $white !default;
458
- $table-text-color-hover: $white !default;
459
- $table-text-color-pressed: $white !default;
460
- $table-text-color-selected: $white !default;
833
+ $content-text-color: $content-text-color !default;
834
+ $content-text-color-alt1: $content-text-color-alt1 !default;
835
+ $content-text-color-alt2: $content-text-color-alt2 !default;
836
+ $content-text-color-alt3: $content-text-color-alt3 !default;
837
+ $content-text-color-hover: $content-text-color-hover !default;
838
+ $content-text-color-pressed: $content-text-color-pressed !default;
839
+ $content-text-color-focus: $content-text-color-focus !default;
840
+ $content-text-color-selected: $content-text-color-selected !default;
841
+ $content-text-color-dragged: $content-text-color-dragged !default;
842
+ $content-text-color-disabled: $content-text-color-disabled !default;
843
+ $placeholder-text-color: $placeholder-text-color !default;
844
+ $flyout-text-color: $flyout-text-color !default;
845
+ $flyout-text-color-hover: $flyout-text-color-hover !default;
846
+ $flyout-text-color-pressed: $flyout-text-color-pressed !default;
847
+ $flyout-text-color-focus: $flyout-text-color-focus !default;
848
+ $table-text-color-hover: $table-text-color-hover !default;
849
+ $table-text-color-pressed: $table-text-color-pressed !default;
850
+ $table-text-color-selected: $table-text-color-selected !default;
461
851
 
462
852
  // icon-color
463
- $icon-color: $gray-500 !default;
464
- $icon-color-hover: $gray-300 !default;
465
- $icon-color-pressed: $gray-100 !default;
466
- $icon-color-disabled: $gray-500 !default;
853
+ $icon-color: $icon-color !default;
854
+ $icon-color-hover: $icon-color-hover !default;
855
+ $icon-color-pressed: $icon-color-pressed !default;
856
+ $icon-color-disabled: $icon-color-disabled !default;
857
+
858
+ // close-icon-color
859
+ $close-icon-color: $close-icon-color !default;
860
+ $close-icon-color-hover: $close-icon-color-hover !default;
861
+ $close-icon-color-pressed: $close-icon-color-pressed !default;
862
+ $close-icon-color-disabled: $close-icon-color-disabled !default;
467
863
 
468
864
  // border-color
469
- $border-light: lighten($gray-800, 7%) !default;
470
- $border: $gray-600 !default;
471
- $border-dark: $gray-500 !default;
472
- $border-hover: $gray-700 !default;
473
- $border-pressed: $gray-600 !default;
474
- $border-focus: $gray-700 !default;
475
- $border-selected: $gray-600 !default;
476
- $border-dragged: $gray-600 !default;
477
- $border-disabled: $border-light !default;
478
- $border-warning: lighten($yellow, 10%) !default;
479
- $border-error: lighten($red, 10%) !default;
480
- $border-success: lighten($green, 10%) !default;
481
- $spreadsheet-gridline: $gray-300 !default;
865
+ $border-light: $border-light !default;
866
+ $border: $border !default;
867
+ $border-dark: $border-dark !default;
868
+ $border-hover: $border-hover !default;
869
+ $border-pressed: $border-pressed !default;
870
+ $border-focus: $border-focus !default;
871
+ $border-selected: $border-selected !default;
872
+ $border-dragged: $border-dragged !default;
873
+ $border-disabled: $border-disabled !default;
874
+ $border-warning: $border-warning !default;
875
+ $border-error: $border-error !default;
876
+ $border-success: $border-success !default;
877
+ $spreadsheet-gridline: $spreadsheet-gridline !default;
878
+ $flyout-border: $flyout-border !default;
482
879
 
483
880
  // Tooltip
484
- $tooltip-bg-color: $gray-200 !default;
485
- $tooltip-border: $gray-200;
486
- $toooltip-text-color: $gray-900 !default;
881
+ $tooltip-bg-color: $tooltip-bg-color !default;
882
+ $tooltip-border: $tooltip-border !default;
883
+ $tooltip-text-color: $tooltip-text-color !default;
487
884
 
488
885
  // shadow
489
886
  $shadow: 0 .8px 16px rgba($black, .15) !default;
490
887
  $shadow-sm: 0 2px 4px rgba($black, .075) !default;
491
888
  $shadow-md: 0 8px 12px rgba($black, .15) !default;
492
- $shadow-lg:0 16px 48px rgba($black, .175) !default;
889
+ $shadow-lg: 0 16px 48px rgba($black, .175) !default;
493
890
  $shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
494
891
  $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
495
892
  $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
496
893
  $shadow-none: 0 0 rgba($black, 0) !default;
497
- $shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
498
- $shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
499
- $primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
500
- $secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
501
- $success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
502
- $danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
503
- $info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
504
- $warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
894
+ $shadow-focus-ring1: 0 0 0 4px rgba($primary-shadow, .25) !default;
895
+ $shadow-focus-ring2: 0 0 0 4px rgba($primary-shadow, .25) !default;
896
+ $primary-shadow-focus: 0 0 0 4px rgba($primary-shadow, .5) !default;
897
+ $secondary-shadow-focus: 0 0 0 4px rgba($secondary-shadow, .5) !default;
898
+ $success-shadow-focus: 0 0 0 4px rgba($success-shadow, .5) !default;
899
+ $danger-shadow-focus: 0 0 0 4px rgba($danger-shadow, .5) !default;
900
+ $info-shadow-focus: 0 0 0 4px rgba($info-shadow, .5) !default;
901
+ $warning-shadow-focus: 0 0 0 4px rgba($warning-shadow, .5) !default;
902
+ $keyboard-focus-shadow: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $shadow-color1 !default;
505
903
 
506
904
  // fontfamily
507
- $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;
905
+ $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;
508
906
 
509
907
  // default font Size
510
908
  $text-xxs: 10px !default;
@@ -530,6 +928,8 @@ $h4-font-size: $text-2xl !default;
530
928
  $h5-font-size: $text-xl !default;
531
929
  $h6-font-size: $text-base !default;
532
930
 
931
+ // display
932
+
533
933
  // Line height
534
934
  $leading-none: 1 !default;
535
935
  $leading-tight: 1.25 !default;
@@ -539,265 +939,260 @@ $leading-relaxed: 1.625 !default;
539
939
  $leading-loose: 2 !default;
540
940
 
541
941
  // font Weight
942
+ $font-weight: 400 !default;
542
943
  $font-weight-lighter: lighter !default;
543
944
  $font-weight-light: 300 !default;
544
- $font-weight-normal:400 !default;
545
- $font-weight-medium:500 !default;
546
- $font-weight-bold:700 !default;
547
- $font-weight-bolder:bolder !default;
945
+ $font-weight-normal: 400 !default;
946
+ $font-weight-medium: 500 !default;
947
+ $font-weight-bold: 700 !default;
948
+ $font-weight-bolder: bolder !default;
548
949
 
549
950
  // Secondary-button
550
- $secondary-bg-color: $secondary !default;
551
- $secondary-border-color: $secondary-bg-color !default;
552
- $secondary-text-color: $white !default;
553
- $secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
554
- $secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
555
- $secondary-text-color-hover: $secondary-text-color !default;
556
- $secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
557
- $secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
558
- $secondary-text-color-pressed: $secondary-text-color !default;
559
- $secondary-bg-color-focus: $secondary-bg-color-hover !default;
560
- $secondary-border-color-focus: $secondary-border-color-hover !default;
561
- $secondary-text-color-focus: $secondary-text-color-hover !default;
562
- $secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
951
+ $secondary-bg-color: $secondary-bg-color !default;
952
+ $secondary-border-color: $secondary-border-color !default;
953
+ $secondary-text-color: $secondary-text-color !default;
954
+ $secondary-bg-color-hover: $secondary-bg-color-hover !default;
955
+ $secondary-border-color-hover: $secondary-border-color-hover !default;
956
+ $secondary-text-color-hover: $secondary-text-color-hover !default;
957
+ $secondary-bg-color-pressed: $secondary-bg-color-pressed !default;
958
+ $secondary-border-color-pressed: $secondary-border-color-pressed !default;
959
+ $secondary-text-color-pressed: $secondary-text-color-pressed !default;
960
+ $secondary-bg-color-focus: $secondary-bg-color-focus !default;
961
+ $secondary-border-color-focus: $secondary-border-color-focus !default;
962
+ $secondary-text-color-focus: $secondary-text-color-focus !default;
963
+ $secondary-bg-color-disabled: $secondary-bg-color-disabled !default;
563
964
  $secondary-border-color-disabled: $secondary-bg-color-disabled !default;
564
965
  $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
565
966
 
566
967
  // Primary-button
567
- $primary-bg-color: $primary !default;
568
- $primary-border-color: $primary !default;
569
- $primary-text: $primary-text-color !default;
570
- $primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
571
- $primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
572
- $primary-text-hover: $primary-text !default;
573
- $primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
574
- $primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
575
- $primary-text-pressed: $primary-text-color !default;
576
- $primary-bg-color-focus: $primary-bg-color-hover !default;
577
- $primary-border-color-focus: $primary-border-color-hover !default;
578
- $primary-text-focus: $primary-text !default;
579
- $primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
580
- $primary-border-color-disabled: $primary-bg-color-disabled !default;
581
- $primary-text-disabled: rgba($primary-text, .65) !default;
968
+
969
+ $primary-bg-color: rgba($primary-bg-color, 1) !default;
970
+ $primary-border-color: $primary-border-color !default;
971
+ $primary-text: $primary-text !default;
972
+ $primary-bg-color-hover: $primary-bg-color-hover !default;
973
+ $primary-border-color-hover: $primary-border-color-hover !default;
974
+ $primary-text-hover: $primary-text-hover !default;
975
+ $primary-bg-color-pressed: $primary-bg-color-pressed !default;
976
+ $primary-border-color-pressed: $primary-border-color-pressed !default;
977
+ $primary-text-pressed: $primary-text-pressed !default;
978
+ $primary-bg-color-focus: $primary-bg-color-focus !default;
979
+ $primary-border-color-focus: $primary-border-color-focus !default;
980
+ $primary-text-focus: $primary-text-focus !default;
981
+ $primary-bg-color-disabled: $primary-bg-color-disabled !default;
982
+ $primary-border-color-disabled: $primary-border-color-disabled !default;
983
+ $primary-text-disabled: $primary-text-disabled !default;
582
984
 
583
985
  // Success-button
584
- $success-bg-color: $green !default;
585
- $success-border-color: $green !default;
586
- $success-text: $white !default;
587
- $success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
588
- $success-border-color-hover: shade-color($success-bg-color, 20%) !default;
589
- $success-text-hover: $success-text !default;
590
- $success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
591
- $success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
592
- $success-text-pressed: $success-text !default;
593
- $success-bg-color-focus: $success-bg-color-hover !default;
594
- $success-border-color-focus: $success-border-color-hover !default;
595
- $success-text-focus: $success-text !default;
596
- $success-bg-color-disabled: rgba($success-bg-color, .65) !default;
597
- $success-border-color-disabled: $success-bg-color-disabled !default;
598
- $success-text-disabled: rgba($success-text, .65) !default;
986
+ $success-bg-color: rgba($success-bg-color, 1) !default;
987
+ $success-border-color: $success-border-color !default;
988
+ $success-text: $success-text !default;
989
+ $success-bg-color-hover: $success-bg-color-hover !default;
990
+ $success-border-color-hover: $success-border-color-hover !default;
991
+ $success-text-hover: $success-text-hover !default;
992
+ $success-bg-color-pressed: $success-bg-color-pressed !default;
993
+ $success-border-color-pressed: $success-border-color-pressed !default;
994
+ $success-text-pressed: $success-text-pressed !default;
995
+ $success-bg-color-focus: $success-bg-color-focus !default;
996
+ $success-border-color-focus: $success-border-color-focus !default;
997
+ $success-text-focus: $success-text-focus !default;
998
+ $success-bg-color-disabled: $success-bg-color-disabled !default;
999
+ $success-border-color-disabled: $success-border-color-disabled !default;
1000
+ $success-text-disabled: $success-text-disabled !default;
599
1001
 
600
1002
  // Warning-button
601
- $warning-bg-color: $yellow !default;
602
- $warning-border-color: $yellow !default;
603
- $warning-text: $black !default;
604
- $warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
605
- $warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
606
- $warning-text-hover: $warning-text !default;
607
- $warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
608
- $warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
609
- $warning-text-pressed: $warning-text !default;
610
- $warning-bg-color-focus: $warning-bg-color-hover !default;
611
- $warning-border-color-focus: $warning-border-color-hover !default;
612
- $warning-text-focus: $warning-text !default;
613
- $warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
614
- $warning-border-color-disabled: $warning-bg-color-disabled !default;
615
- $warning-text-disabled: rgba($warning-text, .65) !default;
616
-
617
- // danger-button
618
- $danger-bg-color: $red !default;
619
- $danger-border-color: $red !default;
620
- $danger-text: $white !default;
621
- $danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
622
- $danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
623
- $danger-text-hover: $danger-text !default;
624
- $danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
625
- $danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
626
- $danger-text-pressed: $danger-text !default;
627
- $danger-bg-color-focus: $danger-bg-color-hover !default;
628
- $danger-border-color-focus: $danger-border-color-hover !default;
629
- $danger-text-focus: $danger-text !default;
630
- $danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
631
- $danger-border-color-disabled: $danger-bg-color-disabled !default;
632
- $danger-text-disabled: rgba($danger-text, .65) !default;
1003
+ $warning-bg-color: rgba($warning-bg-color, 1) !default;
1004
+ $warning-border-color: $warning-border-color !default;
1005
+ $warning-text: $warning-text !default;
1006
+ $warning-bg-color-hover: $warning-bg-color-hover !default;
1007
+ $warning-border-color-hover: $warning-border-color-hover !default;
1008
+ $warning-text-hover: $warning-text-hover !default;
1009
+ $warning-bg-color-pressed: $warning-bg-color-pressed !default;
1010
+ $warning-border-color-pressed: $warning-border-color-pressed !default;
1011
+ $warning-text-pressed: $warning-text-pressed !default;
1012
+ $warning-bg-color-focus: $warning-bg-color-focus !default;
1013
+ $warning-border-color-focus: $warning-border-color-focus !default;
1014
+ $warning-text-focus: $warning-text-focus !default;
1015
+ $warning-bg-color-disabled: $warning-bg-color-disabled !default;
1016
+ $warning-border-color-disabled: $warning-border-color-disabled !default;
1017
+ $warning-text-disabled: $warning-text-disabled !default;
633
1018
 
634
1019
  // Info-button
635
- $info-bg-color: $cyan !default;
636
- $info-border-color: $cyan !default;
637
- $info-text: $black !default;
638
- $info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
639
- $info-border-color-hover: tint-color($info-bg-color, 10%) !default;
640
- $info-text-hover: $info-text !default;
641
- $info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
642
- $info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
643
- $info-text-pressed: $info-text !default;
644
- $info-bg-color-focus: $info-bg-color-hover !default;
645
- $info-border-color-focus: $info-border-color-hover !default;
646
- $info-text-focus: $info-text-hover !default;
647
- $info-bg-color-disabled: rgba($info-bg-color, .65) !default;
648
- $info-border-color-disabled: $info-bg-color-disabled !default;
649
- $info-text-disabled: rgba($info-text, .65) !default;
1020
+ $info-bg-color: rgba($info-bg-color, 1) !default;
1021
+ $info-border-color: $info-border-color !default;
1022
+ $info-text: $info-text !default;
1023
+ $info-bg-color-hover: $info-bg-color-hover !default;
1024
+ $info-border-color-hover: $info-border-color-hover !default;
1025
+ $info-text-hover: $info-text-hover !default;
1026
+ $info-bg-color-pressed: $info-bg-color-pressed !default;
1027
+ $info-border-color-pressed: $info-border-color-pressed !default;
1028
+ $info-text-pressed: $info-text-pressed !default;
1029
+ $info-bg-color-focus: $info-bg-color-focus !default;
1030
+ $info-border-color-focus: $info-border-color-focus !default;
1031
+ $info-text-focus: $info-text-focus !default;
1032
+ $info-bg-color-disabled: $info-bg-color-disabled !default;
1033
+ $info-border-color-disabled: $info-border-color-disabled !default;
1034
+ $info-text-disabled: $info-text-disabled !default;
1035
+
1036
+ // danger-button
1037
+ $danger-bg-color: rgba($danger-bg-color, 1) !default;
1038
+ $danger-border-color: $danger-border-color !default;
1039
+ $danger-text: $danger-text !default;
1040
+ $danger-bg-color-hover: $danger-bg-color-hover !default;
1041
+ $danger-border-color-hover: $danger-border-color-hover !default;
1042
+ $danger-text-hover: $danger-text-hover !default;
1043
+ $danger-bg-color-pressed: $danger-bg-color-pressed !default;
1044
+ $danger-border-color-pressed: $danger-border-color-pressed !default;
1045
+ $danger-text-pressed: $danger-text-pressed !default;
1046
+ $danger-bg-color-focus: $danger-bg-color-focus !default;
1047
+ $danger-border-color-focus: $danger-border-color-focus !default;
1048
+ $danger-text-focus: $danger-text-focus !default;
1049
+ $danger-bg-color-disabled: $danger-bg-color-disabled !default;
1050
+ $danger-border-color-disabled: $danger-border-color-disabled !default;
1051
+ $danger-text-disabled: $danger-text-disabled !default;
650
1052
 
651
1053
  //Outline button
652
- $primary-outline: lighten($primary, 10%) !default;
653
- $secondary-outline: lighten($secondary, 10%) !default;
654
- $warning-outline: lighten($warning, 10%) !default;
655
- $danger-outline: lighten($danger, 10%) !default;
656
- $success-outline: lighten($success, 10%) !default;
657
- $info-outline: lighten($info, 10%) !default;
658
-
659
- // Chart series
660
- $series-1: $gray-800;
661
- $series-2: $gray-700;
662
- $series-3: $gray-600;
663
- $series-4: $gray-500;
664
- $series-5: #5ecb9b;
665
- $series-6: #a860f1;
666
- $series-7: #557ef7;
667
- $series-8: #eba844;
668
- $series-9: #e9599b;
669
- $series-10: #3bc6cf;
670
- $series-11: #74b706;
671
- $series-12: #ea6266;
672
- $skin-name: 'bootstrap5' !default;
673
- $theme-name: 'bootstrap5-dark' !default;
674
-
675
- //Diagram Palette color
676
- $diagram-palette-background: $gray-300 !default;
677
- $diagram-palette-hover-background: $gray-400 !default;
1054
+ $primary-outline: $primary-outline !default;
1055
+ $secondary-outline: $secondary-outline !default;
1056
+ $warning-outline: $warning-outline !default;
1057
+ $danger-outline: $danger-outline !default;
1058
+ $success-outline: $success-outline !default;
1059
+ $info-outline: $info-outline !default;
1060
+
1061
+ // chart series
1062
+ $series-1: #e9ecef;
1063
+ $series-2: #dee2e6;
1064
+ $series-3: #ced4da;
1065
+ $series-4: $gray-800;
1066
+ $series-5: #1f2937;
1067
+ $series-6: #5e6e22;
1068
+ $series-7: #978a2b;
1069
+ $series-8: #6a4314;
1070
+ $series-9: #52236c;
1071
+ $series-10: #3a6b6f;
1072
+ $series-11: #d64f56;
1073
+ $series-12: #f3a93c;
1074
+ $skin-name: 'bootstrap5.3' !default;
1075
+ $theme-name: 'bootstrap5.3-dark' !default;
1076
+
1077
+ //diagram Palette color
1078
+ $diagram-palette-background: $diagram-palette-background !default;
1079
+ $diagram-palette-hover-background: $diagram-palette-hover-background !default;
678
1080
 
679
1081
  //Message component
680
1082
 
681
- //Message Default
682
- $msg-color: $white !default;
683
- $msg-bg-color: #3b4248 !default;
684
- $msg-border-color: lighten($gray-800, 7%) !default;
685
- $msg-color-alt1: $white !default;
686
- $msg-bg-color-alt1: $transparent !default;
687
- $msg-border-color-alt1: #9ca3af !default;
688
- $msg-color-alt2: $white !default;
689
- $msg-bg-color-alt2: lighten($gray-800, 7%) !default;
690
- $msg-border-color-alt2: $msg-bg-color-alt2 !default;
691
-
692
- $msg-icon-color: $white !default;
693
- $msg-icon-color-alt1: $white !default;
694
- $msg-icon-color-alt2: $white !default;
695
-
696
- $msg-close-icon-color: $icon-color !default;
697
- $msg-close-icon-color-alt1: $icon-color !default;
698
- $msg-close-icon-color-alt2: $white !default;
699
-
700
- //Message Danger
701
- $msg-danger-color: lighten($red, 40%) !default;
702
- $msg-danger-bg-color: darken($red, 30%) !default;
703
- $msg-danger-border-color: darken($red, 30%) !default;
704
- $msg-danger-color-alt1: lighten($red, 10%) !default;
705
- $msg-danger-bg-color-alt1: $transparent !default;
706
- $msg-danger-border-color-alt1: lighten($red, 10%) !default;
707
- $msg-danger-color-alt2: $gray-900 !default;
708
- $msg-danger-bg-color-alt2: lighten($red, 10%) !default;
709
- $msg-danger-border-color-alt2: lighten($red, 10%) !default;
710
-
711
- $msg-danger-icon-color: lighten($red, 40%) !default;
712
- $msg-danger-icon-color-alt1: lighten($red, 10%) !default;
713
- $msg-danger-icon-color-alt2: $gray-900 !default;
714
-
715
- $msg-danger-close-icon-color: $icon-color !default;
716
- $msg-danger-close-icon-color-alt1: $icon-color !default;
717
- $msg-danger-close-icon-color-alt2: $gray-900 !default;
1083
+ //Message component
1084
+
1085
+ //Message default
1086
+ $msg-color: $msg-color !default;
1087
+ $msg-bg-color: $msg-bg-color !default;
1088
+ $msg-border-color: $msg-border-color !default;
1089
+ $msg-color-alt1: $msg-color-alt1 !default;
1090
+ $msg-bg-color-alt1: $msg-bg-color-alt1 !default;
1091
+ $msg-border-color-alt1: $msg-border-color-alt1 !default;
1092
+ $msg-color-alt2: $msg-color-alt2 !default;
1093
+ $msg-bg-color-alt2: $msg-bg-color-alt2 !default;
1094
+ $msg-border-color-alt2: $msg-border-color-alt2 !default;
1095
+ $msg-icon-color: $msg-icon-color !default;
1096
+ $msg-icon-color-alt1: $msg-icon-color-alt1 !default;
1097
+ $msg-icon-color-alt2: $msg-icon-color-alt2 !default;
1098
+
1099
+ $msg-close-icon-color: $msg-close-icon-color !default;
1100
+ $msg-close-icon-color-alt1: $msg-close-icon-color-alt21 !default;
1101
+ $msg-close-icon-color-alt2: $msg-close-icon-color-alt2 !default;
718
1102
 
719
1103
  //Message success
720
- $msg-success-color: #2ed889 !default;
721
- $msg-success-bg-color: darken($green, 20%) !default;
722
- $msg-success-border-color: darken($green, 18%) !default;
723
- $msg-success-color-alt1: lighten($green, 10%) !default;
724
- $msg-success-bg-color-alt1: $transparent !default;
725
- $msg-success-border-color-alt1: lighten($green, 10%) !default;
726
- $msg-success-color-alt2: $gray-900 !default;
727
- $msg-success-bg-color-alt2: lighten($green, 10%) !default;
728
- $msg-success-border-color-alt2: lighten($green, 10%) !default;
729
-
730
- $msg-success-icon-color: #2ed889 !default;
731
- $msg-success-icon-color-alt1: lighten($green, 10%) !default;
732
- $msg-success-icon-color-alt2: $gray-900 !default;
733
-
734
- $msg-success-close-icon-color: $icon-color !default;
735
- $msg-success-close-icon-color-alt1: $icon-color !default;
736
- $msg-success-close-icon-color-alt2: $gray-900 !default;
737
-
738
- //Message warning
739
- $msg-warning-color: lighten($yellow, 35%) !default;
740
- $msg-warning-bg-color: darken($yellow, 25%) !default;
741
- $msg-warning-border-color: darken($yellow, 22%) !default;
742
- $msg-warning-color-alt1: $yellow !default;
743
- $msg-warning-bg-color-alt1: $transparent !default;
744
- $msg-warning-border-color-alt1: $yellow !default;
745
- $msg-warning-color-alt2: $gray-900 !default;
746
- $msg-warning-bg-color-alt2: $yellow !default;
747
- $msg-warning-border-color-alt2: $yellow !default;
748
-
749
- $msg-warning-icon-color: $yellow !default;
750
- $msg-warning-icon-color-alt1: $yellow !default;
751
- $msg-warning-icon-color-alt2: $gray-900 !default;
752
-
753
- $msg-warning-close-icon-color: $icon-color !default;
754
- $msg-warning-close-icon-color-alt1: $icon-color !default;
755
- $msg-warning-close-icon-color-alt2: $gray-900 !default;
1104
+ $msg-success-color: $msg-success-color !default;
1105
+ $msg-success-bg-color: $msg-success-bg-color !default;
1106
+ $msg-success-border-color: $msg-success-border-color !default;
1107
+ $msg-success-color-alt1: $msg-success-color-alt1 !default;
1108
+ $msg-success-bg-color-alt1: $msg-success-bg-color-alt1 !default;
1109
+ $msg-success-border-color-alt1: $msg-success-border-color-alt1 !default;
1110
+ $msg-success-color-alt2: $msg-success-color-alt2 !default;
1111
+ $msg-success-bg-color-alt2: $msg-success-bg-color-alt2 !default;
1112
+ $msg-success-border-color-alt2: $msg-success-border-color-alt2 !default;
1113
+ $msg-success-icon-color: $msg-success-icon-color !default;
1114
+ $msg-success-icon-color-alt1: $msg-success-icon-color-alt1 !default;
1115
+ $msg-success-icon-color-alt2: $msg-success-icon-color-alt2 !default;
1116
+ $msg-success-close-icon-color: $msg-success-close-icon-color !default;
1117
+ $msg-success-close-icon-color-alt1: $msg-success-close-icon-color-alt1 !default;
1118
+ $msg-success-close-icon-color-alt2: $msg-success-close-icon-color-alt2 !default;
1119
+
1120
+ //Message danger
1121
+ $msg-danger-color: $msg-danger-color !default;
1122
+ $msg-danger-bg-color: $msg-danger-bg-color !default;
1123
+ $msg-danger-border-color: $msg-danger-border-color !default;
1124
+ $msg-danger-color-alt1: $msg-danger-color-alt1 !default;
1125
+ $msg-danger-bg-color-alt1: $msg-danger-bg-color-alt1 !default;
1126
+ $msg-danger-border-color-alt1: $msg-danger-border-color-alt1 !default;
1127
+ $msg-danger-color-alt2: $msg-danger-color-alt2 !default;
1128
+ $msg-danger-bg-color-alt2: $msg-danger-bg-color-alt2 !default;
1129
+ $msg-danger-border-color-alt2: $msg-danger-border-color-alt2 !default;
1130
+ $msg-danger-icon-color: $msg-danger-icon-color !default;
1131
+ $msg-danger-icon-color-alt1: $msg-danger-icon-color-alt1 !default;
1132
+ $msg-danger-icon-color-alt2: $msg-danger-icon-color-alt2 !default;
1133
+ $msg-danger-close-icon-color: $msg-danger-close-icon-color !default;
1134
+ $msg-danger-close-icon-color-alt1: $msg-danger-close-icon-color-alt1 !default;
1135
+ $msg-danger-close-icon-color-alt2: $msg-danger-close-icon-color-alt2 !default;
756
1136
 
757
1137
  //Message Info
758
- $msg-info-color: lighten($cyan, 25%) !default;
759
- $msg-info-bg-color: darken($cyan, 30%) !default;
760
- $msg-info-border-color: darken($cyan, 27%) !default;
761
- $msg-info-color-alt1: $cyan !default;
762
- $msg-info-bg-color-alt1: $transparent !default;
763
- $msg-info-border-color-alt1: $cyan !default;
764
- $msg-info-color-alt2: $gray-900 !default;
765
- $msg-info-bg-color-alt2: $cyan !default;
766
- $msg-info-border-color-alt2: $cyan !default;
767
-
768
- $msg-info-icon-color: $cyan !default;
769
- $msg-info-icon-color-alt1: $cyan !default;
770
- $msg-info-icon-color-alt2: $gray-900 !default;
771
-
772
- $msg-info-close-icon-color: $icon-color !default;
773
- $msg-info-close-icon-color-alt1: $icon-color !default;
774
- $msg-info-close-icon-color-alt2: $gray-900 !default;
775
-
776
- //App bar
1138
+ $msg-info-color: $msg-info-color !default;
1139
+ $msg-info-bg-color: $msg-info-bg-color !default;
1140
+ $msg-info-border-color: $msg-info-border-color !default;
1141
+ $msg-info-color-alt1: $msg-info-color-alt1 !default;
1142
+ $msg-info-bg-color-alt1: $msg-info-bg-color-alt1 !default;
1143
+ $msg-info-border-color-alt1: $msg-info-border-color-alt1 !default;
1144
+ $msg-info-color-alt2: $msg-info-color-alt2 !default;
1145
+ $msg-info-bg-color-alt2: $msg-info-bg-color-alt2 !default;
1146
+ $msg-info-border-color-alt2: $msg-info-border-color-alt2 !default;
1147
+ $msg-info-icon-color: $msg-info-icon-color !default;
1148
+ $msg-info-icon-color-alt1: $msg-info-icon-color-alt1 !default;
1149
+ $msg-info-icon-color-alt2: $msg-info-icon-color-alt2 !default;
1150
+ $msg-info-close-icon-color: $msg-info-close-icon-color !default;
1151
+ $msg-info-close-icon-color-alt1: $msg-info-close-icon-color-alt1 !default;
1152
+ $msg-info-close-icon-color-alt2: $msg-info-close-icon-color-alt2 !default;
1153
+
1154
+ //Message Warning
1155
+ $msg-warning-color: $msg-warning-color !default;
1156
+ $msg-warning-bg-color: $msg-warning-bg-color !default;
1157
+ $msg-warning-border-color: $msg-warning-border-color !default;
1158
+ $msg-warning-color-alt1: $msg-warning-color-alt1 !default;
1159
+ $msg-warning-bg-color-alt1: $msg-warning-bg-color-alt1 !default;
1160
+ $msg-warning-border-color-alt1: $msg-warning-border-color-alt1 !default;
1161
+ $msg-warning-color-alt2: $msg-warning-color-alt2 !default;
1162
+ $msg-warning-bg-color-alt2: $msg-warning-bg-color-alt2 !default;
1163
+ $msg-warning-border-color-alt2: $msg-warning-border-color-alt2 !default;
1164
+ $msg-warning-icon-color: $msg-warning-icon-color !default;
1165
+ $msg-warning-icon-color-alt1: $msg-warning-icon-color-alt1 !default;
1166
+ $msg-warning-icon-color-alt2: $msg-warning-icon-color-alt2 !default;
1167
+ $msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
1168
+ $msg-warning-close-icon-color-alt1: $msg-warning-close-icon-color-alt1 !default;
1169
+ $msg-warning-close-icon-color-alt2: $msg-warning-close-icon-color-alt2 !default;
1170
+
1171
+ //app bar
777
1172
  //Light
778
- $appbar-bg-color-alt1: $gray-800 !default;
779
- $appbar-color-alt1: $white !default;
780
- $appbar-border-color-alt1: $gray-800 !default;
781
- $appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
1173
+ $appbar-bg-color-alt1: $appbar-bg-color-alt1 !default;
1174
+ $appbar-color-alt1: $appbar-color-alt1 !default;
1175
+ $appbar-border-color-alt1: $appbar-border-color-alt1 !default;
1176
+ $appbar-hover-bg-color-alt1: $appbar-hover-bg-color-alt1 !default;
782
1177
 
783
- //Dark
784
- $appbar-bg-color-alt2: $gray-300 !default;
785
- $appbar-color-alt2: $gray-900 !default;
786
- $appbar-border-color-alt2: $gray-300 !default;
787
- $appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
1178
+ //dark
1179
+ $appbar-bg-color-alt2: $appbar-bg-color-alt2 !default;
1180
+ $appbar-color-alt2: $appbar-color-alt2 !default;
1181
+ $appbar-border-color-alt2: $appbar-border-color-alt2 !default;
1182
+ $appbar-hover-bg-color-alt2: $appbar-hover-bg-color-alt2 !default;
788
1183
 
789
1184
  //shadow
790
1185
  $appbar-bottom-shadow: none !default;
791
1186
  $appbar-top-shadow: none !default;
792
1187
 
793
1188
  //rating
794
- $rating-selected-color: $primary !default;
795
- $rating-unrated-color: $gray-500 !default;
796
- $rating-selected-disabled-color: $gray-600 !default;
797
- $rating-unrated-disabled-color: $gray-700 !default;
798
- $rating-selected-hover-color: $gray-500 !default;
799
- $rating-unrated-hover-color: $primary !default;
800
- $rating-pressed-color: lighten($primary, 15%) !default;
1189
+ $rating-selected-color: $rating-selected-color !default;
1190
+ $rating-unrated-color: $rating-unrated-color !default;
1191
+ $rating-selected-disabled-color: $rating-selected-disabled-color !default;
1192
+ $rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
1193
+ $rating-selected-hover-color: $rating-selected-hover-color !default;
1194
+ $rating-unrated-hover-color: $rating-unrated-hover-color !default;
1195
+ $rating-pressed-color: $rating-pressed-color !default;
801
1196
 
802
1197
  //font-icons
803
1198
  $font-icon-8: 8px !default;
@@ -816,38 +1211,15 @@ $font-icon-24: 24px !default;
816
1211
  $font-icon-26: 26px !default;
817
1212
  $font-icon-28: 28px !default;
818
1213
  $font-icon-32: 32px !default;
819
-
820
- $font-size: 12px !default;
821
- $font-weight: 400 !default;
822
- $error-font-color: $danger !default;
823
- $warning-font-color: $yellow !default;
824
- $success-font-color: lighten($green, 10%) !default;
825
- $information-font-color: $cyan !default;
826
-
827
- $badge-primary-bg-color-darken: darken($primary, 10%);
828
- $badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
829
- $badge-success-bg-color-darken: darken($success-light, 10%);
830
- $badge-danger-bg-color-darken: darken($danger-light, 10%);
831
- $badge-warning-bg-color-darken: darken($warning-light, 10%);
832
- $badge-info-bg-color-darken: darken($info-light, 10%);
833
- $badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
834
- $badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
835
- $breadcrumb-item-hover-color: darken($primary-outline, 10%);
836
- $breadcrumb-item-active-color: darken($primary-outline, 15%);
837
- $breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
838
- $calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%);
839
- $calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
840
- $tab-alt-wrap-hover-color: darken($secondary, 15%);
841
- $treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
842
- $de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
843
- $de-toggle-border-color: darken($secondary-bg-color, 12.5%);
844
- $de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
845
- $de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
846
- $de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
847
- $connector-point-hover-color: darken($primary, 10%);
848
- $gantt-connected-task: lighten($primary, 20%);
849
- $gantt-active-parent-task: lighten($warning-text, 10%);
850
- $schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
851
- $timepicker-active-border-color: darken($gray-600, 10%);
852
- $hdr-selection-border-color: darken($border-light, 8%);
853
- $accordion-text-active-color: shade-color($primary, 10%) !default;
1214
+ $accordion-text-active-color: ($primary, 10%) !default;
1215
+
1216
+ //badge
1217
+ $badge-light-bg-color: $badge-light-bg-color;
1218
+ $badge-light-border-color: $badge-light-border-color;
1219
+ $badge-light-text-color: $badge-light-text-color;
1220
+ $badge-dark-bg-color: $badge-dark-bg-color;
1221
+ $badge-dark-border-color: $badge-dark-border-color;
1222
+ $badge-dark-text-color: $badge-dark-text-color;
1223
+
1224
+ $tab-border: $tab-border;
1225
+ $stepper:$stepper;