@syncfusion/ej2-base 26.2.5 → 27.1.48

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 (89) 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 +7 -6
  7. package/dist/es6/ej2-base.es2015.js.map +1 -1
  8. package/dist/es6/ej2-base.es5.js +7 -6
  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 +12 -7
  14. package/src/component.js +1 -1
  15. package/src/internationalization.d.ts +4 -0
  16. package/src/intl/intl-base.d.ts +2 -1
  17. package/src/intl/intl-base.js +3 -2
  18. package/src/intl/number-formatter.js +1 -1
  19. package/src/validate-lic.js +2 -2
  20. package/styles/bootstrap-dark-lite.css +3634 -0
  21. package/styles/bootstrap-dark-lite.scss +3 -0
  22. package/styles/bootstrap-dark.css +70 -1
  23. package/styles/bootstrap-lite.css +3634 -0
  24. package/styles/bootstrap-lite.scss +3 -0
  25. package/styles/bootstrap.css +70 -1
  26. package/styles/bootstrap4-lite.css +3284 -0
  27. package/styles/bootstrap4-lite.scss +3 -0
  28. package/styles/bootstrap4.css +67 -1
  29. package/styles/bootstrap5-dark-lite.css +2857 -0
  30. package/styles/bootstrap5-dark-lite.scss +3 -0
  31. package/styles/bootstrap5-dark.css +67 -1
  32. package/styles/bootstrap5-lite.css +2857 -0
  33. package/styles/bootstrap5-lite.scss +3 -0
  34. package/styles/bootstrap5.3-lite.css +3450 -0
  35. package/styles/bootstrap5.3-lite.scss +3 -0
  36. package/styles/bootstrap5.3.css +3450 -0
  37. package/styles/bootstrap5.3.scss +3 -0
  38. package/styles/bootstrap5.css +67 -1
  39. package/styles/definition/_bds-dark.scss +139 -25
  40. package/styles/definition/_bds.scss +201 -52
  41. package/styles/definition/_bootstrap5.3-dark.scss +912 -540
  42. package/styles/definition/_bootstrap5.3.scss +912 -826
  43. package/styles/definition/_fluent2-dark.scss +20 -6
  44. package/styles/definition/_fluent2-highcontrast.scss +45 -31
  45. package/styles/definition/_fluent2.scss +60 -34
  46. package/styles/fabric-dark-lite.css +3619 -0
  47. package/styles/fabric-dark-lite.scss +3 -0
  48. package/styles/fabric-dark.css +70 -1
  49. package/styles/fabric-lite.css +3619 -0
  50. package/styles/fabric-lite.scss +3 -0
  51. package/styles/fabric.css +70 -1
  52. package/styles/fluent-dark-lite.css +2857 -0
  53. package/styles/fluent-dark-lite.scss +3 -0
  54. package/styles/fluent-dark.css +67 -1
  55. package/styles/fluent-lite.css +2857 -0
  56. package/styles/fluent-lite.scss +3 -0
  57. package/styles/fluent.css +67 -1
  58. package/styles/fluent2-lite.css +3908 -0
  59. package/styles/fluent2-lite.scss +3 -0
  60. package/styles/fluent2.css +113 -30
  61. package/styles/highcontrast-light-lite.css +3610 -0
  62. package/styles/highcontrast-light-lite.scss +3 -0
  63. package/styles/highcontrast-light.css +70 -1
  64. package/styles/highcontrast-lite.css +3610 -0
  65. package/styles/highcontrast-lite.scss +3 -0
  66. package/styles/highcontrast.css +70 -1
  67. package/styles/material-dark-lite.css +3587 -0
  68. package/styles/material-dark-lite.scss +3 -0
  69. package/styles/material-dark.css +70 -1
  70. package/styles/material-lite.css +3587 -0
  71. package/styles/material-lite.scss +3 -0
  72. package/styles/material.css +70 -1
  73. package/styles/material3-dark-lite.css +2912 -0
  74. package/styles/material3-dark-lite.scss +3 -0
  75. package/styles/material3-dark.css +67 -1
  76. package/styles/material3-lite.css +2968 -0
  77. package/styles/material3-lite.scss +3 -0
  78. package/styles/material3.css +67 -1
  79. package/styles/offline-theme/material-dark.css +70 -1
  80. package/styles/offline-theme/material.css +70 -1
  81. package/styles/offline-theme/tailwind-dark.css +67 -1
  82. package/styles/offline-theme/tailwind.css +67 -1
  83. package/styles/tailwind-dark-lite.css +2858 -0
  84. package/styles/tailwind-dark-lite.scss +3 -0
  85. package/styles/tailwind-dark.css +67 -1
  86. package/styles/tailwind-lite.css +2858 -0
  87. package/styles/tailwind-lite.scss +3 -0
  88. package/styles/tailwind.css +67 -1
  89. package/hotfix/26.1.35_Vol2.txt +0 -1
package/styles/definition/_bootstrap5.3.scss CHANGED
@@ -4,459 +4,465 @@
4
4
  @return var(#{'--color-sf-'+ $pallete-name});
5
5
  }
6
6
 
7
- // backgroundcolor
8
- $content-bg-color: mapcolorvariable('content-bg-color') !default;
9
- $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
10
- $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
11
- $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
12
- $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
13
- $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
14
- $content-bg-color-hover: mapcolorvariable('content-bg-colo-hover') !default;
15
- $content-bg-color-pressed: mapcolorvariable('content-bg-pressed') !default;
16
- $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
17
- $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
18
- $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
19
- $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
20
- $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
21
- $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
22
- $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
23
- $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
24
- $overlay-bg-color: mapcolorvariable('overlay-bg-color');
25
- $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
26
- $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
27
- $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
28
-
29
- // text-color
30
- $content-text-color: mapcolorvariable('content-text-color') !default;
31
- $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
32
- $content-text-color-alt2: mapcolorvariable('ccontent-text-color-alt2') !default;
33
- $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
34
- $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
35
- $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
36
- $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
37
- $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
38
- $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
39
- $content-text-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
40
- $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
41
- $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
42
- $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
43
- $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
44
- $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
45
- $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
46
- $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
47
- $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
48
-
49
- // icon-color
50
- $icon-color: mapcolorvariable('icon-color') !default;
51
- $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
52
- $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
53
- $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
54
-
55
- // border-color
56
- $border-light: mapcolorvariable('border-light') !default;
57
- $border: mapcolorvariable('border') !default;
58
- $border-dark: mapcolorvariable('border--dark') !default;
59
- $border-hover: mapcolorvariable('border-hover') !default;
60
- $border-pressed: mapcolorvariable('border-pressed') !default;
61
- $border-focus: mapcolorvariable('border-focus') !default;
62
- $border-selected: mapcolorvariable('border-selected') !default;
63
- $border-dragged:mapcolorvariable('border-dragged') !default;
64
- $border-disabled: mapcolorvariable('border-disabled') !default;
65
- $border-warning: mapcolorvariable('border-warning') !default;
66
- $border-error: mapcolorvariable('border-error') !default;
67
- $border-success: mapcolorvariable('border-success') !default;
68
- $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
69
- $flyout-border: mapcolorvariable('flyout-border') !default;
70
-
71
- //sf Variables
72
- $primary: mapcolorvariable('primary') !default;
73
- $secondary: mapcolorvariable('secondary') !default;
74
- $primary-text-color: mapcolorvariable('primary-text-color') !default;
75
- $primary-light: mapcolorvariable('primary-light') !default;
76
- $primary-lighter: mapcolorvariable('primary-lighter') !default;
77
- $success: mapcolorvariable('success') !default;
78
- $info: mapcolorvariable('info') !default;
79
- $warning: mapcolorvariable('warning') !default;
80
- $danger: mapcolorvariable('danger') !default;
81
- $success-light: mapcolorvariable('success-light') !default;
82
- $info-light: mapcolorvariable('info-light') !default;
83
- $warning-light: mapcolorvariable('warning-light') !default;
84
- $danger-light: mapcolorvariable('danger-light') !default;
85
- $success-dark: mapcolorvariable('success-dark') !default;
86
- $info-dark: mapcolorvariable('info-dark') !default;
87
- $warning-dark: mapcolorvariable('warning-dark') !default;
88
- $danger-dark: mapcolorvariable('danger-dark') !default;
89
- $success-light-alt: mapcolorvariable('success-light-alt') !default;
90
- $info-light-alt: mapcolorvariable('info-light-alt') !default;
91
- $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
92
- $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
7
+ @function shade-color($color, $percentage) {
8
+ @return mix($black, $color, $percentage);
9
+ }
93
10
 
94
- // Primary-button
95
- $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
96
- $primary-border-color: mapcolorvariable('primary-border-color') !default;
97
- $primary-text: mapcolorvariable('primary-text') !default;
98
- $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
99
- $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
100
- $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
101
- $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
102
- $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
103
- $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
104
- $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
105
- $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
106
- $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
107
- $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
108
- $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
109
- $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
11
+ @function tint-color($color, $percentage) {
12
+ @return mix($white, $color, $percentage);
13
+ }
110
14
 
111
- // Secondary-button
112
- $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
113
- $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
114
- $secondary-text-color: mapcolorvariable('secondary-text-color') !default;
115
- $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
116
- $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
117
- $secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
118
- $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
119
- $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
120
- $secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
121
- $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
122
- $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
123
- $secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
124
- $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
125
- $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
126
- $secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
15
+ :root {
16
+ --color-sf-black: 0, 0, 0;
17
+ --color-sf-white: 255, 255, 255;
18
+ --color-sf-content-bg-color: #fff;
19
+ --color-sf-content-bg-color-alt1: #f8f9fa;
20
+ --color-sf-content-bg-color-alt2: #e9ecef;
21
+ --color-sf-content-bg-color-alt3: #dee2e6;
22
+ --color-sf-content-bg-color-alt4: #ced4da;
23
+ --color-sf-content-bg-color-alt5: #adb5bd;
24
+ --color-sf-content-bg-color-hover: #f8f9fa;
25
+ --color-sf-content-bg-color-pressed: #e9ecef;
26
+ --color-sf-content-bg-color-focus: #e9ecef;
27
+ --color-sf-content-bg-color-selected: #0d6efd;
28
+ --color-sf-content-bg-color-dragged: #ced4da;
29
+ --color-sf-content-bg-color-disabled: #e9ecef;
30
+ --color-sf-flyout-bg-color: #fff;
31
+ --color-sf-flyout-bg-color-hover: #f8f9fa;
32
+ --color-sf-flyout-bg-color-pressed: #0d6efd;
33
+ --color-sf-flyout-bg-color-focus: #f8f9fa;
34
+ --color-sf-overlay-bg-color: 0, 0, 0;
35
+ --color-sf-table-bg-color-hover: rgba(0, 0, 0, .07);
36
+ --color-sf-table-bg-color-pressed: #dee2e6;
37
+ --color-sf-table-bg-color-selected: rgba(0, 0, 0, .1);
127
38
 
128
- // Success-button
129
- $success-bg-color: mapcolorvariable('success-bg-color') !default;
130
- $success-border-color: mapcolorvariable('success-border-color') !default;
131
- $success-text: mapcolorvariable('success-text') !default;
132
- $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
133
- $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
134
- $success-text-hover: mapcolorvariable('success-text-hover') !default;
135
- $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
136
- $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
137
- $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
138
- $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
139
- $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
140
- $success-text-focus: mapcolorvariable('success-text-focus') !default;
141
- $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
142
- $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
143
- $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
39
+ // text-color
40
+ --color-sf-content-text-color: #212529;
41
+ --color-sf-content-text-color-alt1: rgba(33, 37, 41, .75);
42
+ --color-sf-content-text-color-alt2: rgba(33, 37, 41, .5);
43
+ --color-sf-content-text-color-alt3: rgba(33, 37, 41, .25);
44
+ --color-sf-content-text-color-hover: #000;
45
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
46
+ --color-sf-content-text-color-focus: #000;
47
+ --color-sf-content-text-color-selected: #fff;
48
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
49
+ --color-sf-content-text-color-disabled: rgba(33, 37, 41, .75);
50
+ --color-sf-placeholder-text-color: #6c757d;
51
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
52
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
53
+ --color-sf-flyout-text-color-pressed: #fff;
54
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
55
+ --color-sf-flyout-text-color-disabled: rgba(33, 37, 41, .5);
56
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
57
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
58
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
144
59
 
145
- // Warning-button
146
- $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
147
- $warning-border-color: mapcolorvariable('warning-border-color') !default;
148
- $warning-text: mapcolorvariable('warning-text') !default;
149
- $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
150
- $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
151
- $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
152
- $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
153
- $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
154
- $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
155
- $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
156
- $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
157
- $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
158
- $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
159
- $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
160
- $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
60
+ // icon-color
61
+ --color-sf-icon-color: #6c757d;
62
+ --color-sf-icon-color-hover: #343a40;
63
+ --color-sf-icon-color-pressed: #212529;
64
+ --color-sf-icon-color-disabled: #adb5bd;
161
65
 
162
- // Info-button
163
- $info-bg-color: mapcolorvariable('info-bg-color') !default;
164
- $info-border-color: mapcolorvariable('info-border-color') !default;
165
- $info-text: mapcolorvariable('info-text') !default;
166
- $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
167
- $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
168
- $info-text-hover: mapcolorvariable('info-text-hover') !default;
169
- $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
170
- $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
171
- $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
172
- $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
173
- $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
174
- $info-text-focus: mapcolorvariable('info-text-focus') !default;
175
- $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
176
- $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
177
- $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
66
+ // close-icon-color
67
+ --color-sf-close-icon-color: rgba(0, 0, 0, .5);
68
+ --color-sf-close-icon-color-hover: rgba(0, 0, 0, .75);
69
+ --color-sf-close-icon-color-pressed: rgba(0, 0, 0, 1);
70
+ --color-sf-close-icon-color-disabled: rgba(0, 0, 0, .25);
178
71
 
179
- // danger-button
180
- $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
181
- $danger-border-color: mapcolorvariable('danger-border-color') !default;
182
- $danger-text: mapcolorvariable('danger-text') !default;
183
- $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
184
- $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
185
- $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
186
- $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
187
- $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
188
- $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
189
- $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
190
- $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
191
- $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
192
- $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
193
- $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
194
- $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
72
+ // border-color
73
+ --color-sf-border-light: #dee2e6;
74
+ --color-sf-border: #dee2e6;
75
+ --color-sf-border-dark: #adb5bd;
76
+ --color-sf-border-hover: #dee2e6;
77
+ --color-sf-border-pressed: #dee2e6;
78
+ --color-sf-border-focus: #86b7fe;
79
+ --color-sf-border-selected: #86b7fe;
80
+ --color-sf-border-dragged: #dee2e6;
81
+ --color-sf-border-disabled: #dee2e6;
82
+ --color-sf-border-warning: #ffc107;
83
+ --color-sf-border-error: #dc3545;
84
+ --color-sf-border-success: #198754;
85
+ --color-sf-spreadsheet-gridline: #dee2e6;
86
+ --color-sf-flyout-border: rgba(0, 0, 0, .175);
195
87
 
196
- //Outline button
197
- $primary-outline: mapcolorvariable('primary-outline') !default;
198
- $secondary-outline: mapcolorvariable('secondary-outline') !default;
199
- $warning-outline: mapcolorvariable('warning-outline') !default;
200
- $danger-outline: mapcolorvariable('danger-outline') !default;
201
- $success-outline: mapcolorvariable('success-outline') !default;
202
- $info-outline: mapcolorvariable('info-outline') !default;
88
+ //sf Variables
89
+ --color-sf-primary: rgba(13, 110, 253, 1);
90
+ --color-sf-primary-text-color: #fff;
91
+ --color-sf-primary-light: #86b7fe;
92
+ --color-sf-primary-lighter: #cfe2ff;
93
+ --color-sf-primary-dark: #3367d1;
94
+ --color-sf-primary-darker: #052c65;
95
+ --color-sf-secondary: rgba(108, 117, 125, 1);
96
+ --color-sf-success: rgba(25, 135, 84, 1);
97
+ --color-sf-info: rgba(13, 202, 240, 1);
98
+ --color-sf-warning: rgba(255, 193, 7, 1);
99
+ --color-sf-danger: rgba(220, 53, 69, 1);
100
+ --color-sf-success-light: #d1e7dd;
101
+ --color-sf-info-light: #cff4fc;
102
+ --color-sf-warning-light: #fff3cd;
103
+ --color-sf-danger-light: #f8d7da;
104
+ --color-sf-success-dark: #0a3622;
105
+ --color-sf-info-dark: #055160;
106
+ --color-sf-warning-dark: #664d03;
107
+ --color-sf-danger-dark: #58151c;
108
+ --color-sf-success-light-alt: #d1e7dd;
109
+ --color-sf-info-light-alt: #cff4fc;
110
+ --color-sf-warning-light-alt: #fff3cd;
111
+ --color-sf-danger-light-alt: #f8d7da;
112
+ --color-sf-primary-shadow: 13, 110, 253;
113
+ --color-sf-secondary-shadow: 108, 117, 125;
114
+ --color-sf-success-shadow: 25, 135, 84;
115
+ --color-sf-info-shadow: 13, 202, 240;
116
+ --color-sf-warning-shadow: 255, 193, 7;
117
+ --color-sf-danger-shadow: 220, 53, 69;
203
118
 
204
- // Tooltip
205
- $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
206
- $tooltip-border: mapcolorvariable('tooltip-border') !default;
207
- $tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
119
+ // Primary-button
120
+ --color-sf-primary-bg-color: var(--color-sf-primary);
121
+ --color-sf-primary-border-color: var(--color-sf-primary);
122
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
123
+ --color-sf-primary-bg-color-hover: #0b5ed7;
124
+ --color-sf-primary-border-color-hover: #0a58ca;
125
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
126
+ --color-sf-primary-bg-color-pressed: #0a58ca;
127
+ --color-sf-primary-border-color-pressed: #0a58ca;
128
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
129
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
130
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
131
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
132
+ --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
133
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
134
+ --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
208
135
 
209
- //appbar
210
- //Light
211
- $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
212
- $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
213
- $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
214
- $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
136
+ // Secondary-button
137
+ --color-sf-secondary-bg-color: var(--color-sf-secondary);
138
+ --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
139
+ --color-sf-secondary-text-color: #fff;
140
+ --color-sf-secondary-bg-color-hover: #5c636a;
141
+ --color-sf-secondary-border-color-hover: #565e64;
142
+ --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
143
+ --color-sf-secondary-bg-color-pressed: #565e64;
144
+ --color-sf-secondary-border-color-pressed: #51585e;
145
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
146
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
147
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
148
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
149
+ --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
150
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
151
+ --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
215
152
 
216
- //dark
217
- $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
218
- $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
219
- $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
220
- $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
153
+ // Success-button
154
+ --color-sf-success-bg-color: var(--color-sf-success);
155
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
156
+ --color-sf-success-text: #fff;
157
+ --color-sf-success-bg-color-hover: #157347;
158
+ --color-sf-success-border-color-hover: #146c43;
159
+ --color-sf-success-text-hover: var(--color-sf-success-text);
160
+ --color-sf-success-bg-color-pressed: #146c43;
161
+ --color-sf-success-border-color-pressed: #13653f;
162
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
163
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
164
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
165
+ --color-sf-success-text-focus: var(--color-sf-success-text);
166
+ --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
167
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
168
+ --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
221
169
 
222
- //diagram Palette color
223
- $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
224
- $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
170
+ // Warning-button
171
+ --color-sf-warning-bg-color: var(--color-sf-warning);
172
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
173
+ --color-sf-warning-text: #000;
174
+ --color-sf-warning-bg-color-hover: #ffca2c;
175
+ --color-sf-warning-border-color-hover: #ffc720;
176
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
177
+ --color-sf-warning-bg-color-pressed: #ffcd39;
178
+ --color-sf-warning-border-color-pressed: #ffc720;
179
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
180
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
181
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
182
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
183
+ --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
184
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
185
+ --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
225
186
 
226
- //rating
227
- $rating-selected-color:mapcolorvariable('diagram-palette-background') !default;
228
- $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
229
- $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
230
- $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
231
- $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color:') !default;
232
- $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
233
- $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
187
+ // Info-button
188
+ --color-sf-info-bg-color: var(--color-sf-info);
189
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
190
+ --color-sf-info-text: #000;
191
+ --color-sf-info-bg-color-hover: #31d2f2;
192
+ --color-sf-info-border-color-hover: #25cff2;
193
+ --color-sf-info-text-hover: var(--color-sf-info-text);
194
+ --color-sf-info-bg-color-pressed: #3dd5f3;
195
+ --color-sf-info-border-color-pressed: #25cff2;
196
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
197
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
198
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
199
+ --color-sf-info-text-focus: var(--color-sf-info-text-hover);
200
+ --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
201
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
202
+ --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
234
203
 
235
- //Message component
204
+ // danger-button
205
+ --color-sf-danger-bg-color: var(--color-sf-danger);
206
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
207
+ --color-sf-danger-text: #fff;
208
+ --color-sf-danger-bg-color-hover: #bb2d3b;
209
+ --color-sf-danger-border-color-hover: #b02a37;
210
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
211
+ --color-sf-danger-bg-color-pressed: #b02a37;
212
+ --color-sf-danger-border-color-pressed: #a52834;
213
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
214
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
215
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
216
+ --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
217
+ --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
218
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
219
+ --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
236
220
 
237
- //Message default
238
- $msg-color: mapcolorvariable('msg-color') !default;
239
- $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
240
- $msg-border-color:mapcolorvariable('msg-border-color') !default;
241
- $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
242
- $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
243
- $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
244
- $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
245
- $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
246
- $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
247
- $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
248
- $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
249
- $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
250
- $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
251
- $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
252
- $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2:') !default;
221
+ //Outline button
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);
253
228
 
254
- //Message success
255
- $msg-success-color: mapcolorvariable('msg-success-color') !default;
256
- $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
257
- $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
258
- $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
259
- $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
260
- $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
261
- $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
262
- $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
263
- $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
264
- $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
265
- $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
266
- $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
267
- $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
268
- $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
269
- $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
229
+ // Tooltip
230
+ --color-sf-tooltip-bg-color: rgba(0, 0, 0, .9);
231
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
232
+ --color-sf-tooltip-text-color: #fff;
270
233
 
271
- //Message danger
272
- $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
273
- $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
274
- $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
275
- $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
276
- $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
277
- $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
278
- $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
279
- $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
280
- $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
281
- $msg-danger-icon-color: mapcolorvariable('$msg-danger-icon-color') !default;
282
- $msg-danger-icon-color-alt1: mapcolorvariable('$msg-danger-icon-color-alt1') !default;
283
- $msg-danger-icon-color-alt2: mapcolorvariable('$msg-danger-icon-color-alt2') !default;
284
- $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
285
- $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
286
- $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
234
+ //appbar Light
235
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
236
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
237
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
238
+ --color-sf-appbar-hover-bg-color-alt1: $transparent;
287
239
 
288
- //Message Info
289
- $msg-info-color: mapcolorvariable('msg-info-color') !default;
290
- $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
291
- $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
292
- $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
293
- $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
294
- $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
295
- $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
296
- $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
297
- $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
298
- $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
299
- $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
300
- $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
301
- $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
302
- $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
303
- $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
240
+ //dark
241
+ --color-sf-appbar-bg-color-alt2: #212529;
242
+ --color-sf-appbar-color-alt2: #fff;
243
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
244
+ --color-sf-appbar-hover-bg-color-alt2: $transparent;
304
245
 
305
- //Message Warning
306
- $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
307
- $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
308
- $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
309
- $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
310
- $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
311
- $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
312
- $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
313
- $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
314
- $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
315
- $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
316
- $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
317
- $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
318
- $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
319
- $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
320
- $msg-warning-close-icon-color-alt2: mapcolorvariable('$msg-warning-close-icon-color-alt2') !default;
246
+ //diagram Palette color
247
+ --color-sf-diagram-palette-background: #fff;
248
+ --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
249
+ --color-sf-diagram-palette-selected-color: #e9ecef;
321
250
 
322
- //badge
323
- $badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
324
- $badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
325
- $badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
326
- $badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
327
- $badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
328
- $badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
329
- $badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
330
- $badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;
251
+ //rating
252
+ --color-sf-rating-selected-color: var(--color-sf-primary);
253
+ --color-sf-rating-unrated-color: #6c757d;
254
+ --color-sf-rating-selected-disabled-color: #adb5bd;
255
+ --color-sf-rating-unrated-disabled-color: #ced4da;
256
+ --color-sf-rating-selected-hover-color: #63757d;
257
+ --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
258
+ --color-sf-rating-pressed-color: #599bfe;
331
259
 
332
- //breadcrumb
333
- $breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
334
- $breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
335
- $breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;
260
+ //Message default
261
+ --color-sf-msg-color: #2b2f32;
262
+ --color-sf-msg-bg-color: #e2e3e5;
263
+ --color-sf-msg-border-color: #c4c8cb;
264
+ --color-sf-msg-color-alt1: var(--color-sf-msg-color);
265
+ --color-sf-msg-bg-color-alt1: $transparent;
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;
269
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
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;
336
276
 
337
- //calendar
338
- $calendar-yeardecade-selected-hover-bg: mapcolorvariable('calendar-yeardecade-selected-hover-bg') !default;
339
- $calendar-active-hover-bg-color: mapcolorvariable('calendar-active-hover-bg-color') !default;
277
+ //Message danger
278
+ --color-sf-msg-danger-color: #58151c;
279
+ --color-sf-msg-danger-bg-color: #f8d7da;
280
+ --color-sf-msg-danger-border-color: #f1aeb5;
281
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
282
+ --color-sf-msg-danger-bg-color-alt1: $transparent;
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;
286
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
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;
340
293
 
341
- //tab
342
- $tab-alt-wrap-hover-color: mapcolorvariable('tab-alt-wrap-hover-color') !default;
294
+ //Message success
295
+ --color-sf-msg-success-color: #0a3622;
296
+ --color-sf-msg-success-bg-color: #d1e7dd;
297
+ --color-sf-msg-success-border-color: #a3cfbb;
298
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
299
+ --color-sf-msg-success-bg-color-alt1: $transparent;
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;
303
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
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;
343
310
 
344
- //treeview
345
- $treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;
311
+ //Message warning
312
+ --color-sf-msg-warning-color: #664d03;
313
+ --color-sf-msg-warning-bg-color: #fff3cd;
314
+ --color-sf-msg-warning-border-color: #ffe69c;
315
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
316
+ --color-sf-msg-warning-bg-color-alt1: $transparent;
317
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
318
+ --color-sf-msg-warning-color-alt2: #212529;
319
+ --color-sf-msg-warning-bg-color-alt2: #ffc107;
320
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
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);
323
+ --color-sf-msg-warning-icon-color-alt2: #212529;
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);
326
+ --color-sf-msg-warning-close-icon-color-alt2: #212529;
346
327
 
347
- //document editor
348
- $de-style-btn-bg-color: mapcolorvariable('de-style-btn-bg-color') !default;
349
- $de-toggle-border-color: mapcolorvariable('de-toggle-border-color') !default;
350
- $de-toggle-hover-color: mapcolorvariable('de-toggle-hover-color') !default;
351
- $de-toggle-border-hover-color: mapcolorvariable('de-toggle-border-hover-color') !default;
352
- $de-toggle-disabled-color: mapcolorvariable('de-toggle-disabled-color') !default;
353
- $connector-point-hover-color: mapcolorvariable('connector-point-hover-color') !default;
354
- $gantt-connected-task: mapcolorvariable('gantt-connected-task') !default;
355
- $gantt-active-parent-task: mapcolorvariable('gantt-active-parent-task') !default;
356
- $schedule-hover-bg-color: mapcolorvariable('schedule-hover-bg-color') !default;
357
- $timepicker-active-border-color: mapcolorvariable('timepicker-active-border-color') !default;
358
- $hdr-selection-border-color: mapcolorvariable('hdr-selection-border-color') !default;
328
+ //Message info
329
+ --color-sf-msg-info-color: #055160;
330
+ --color-sf-msg-info-bg-color: #cff4fc;
331
+ --color-sf-msg-info-border-color: #9eeaf9;
332
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
333
+ --color-sf-msg-info-bg-color-alt1: $transparent;
334
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
335
+ --color-sf-msg-info-color-alt2: #212529;
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);
340
+ --color-sf-msg-info-icon-color-alt2: #212529;
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);
343
+ --color-sf-msg-info-close-icon-color-alt2: #212529;
359
344
 
360
- // black
361
- $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;
362
352
 
363
- // White
364
- $white: #fff !default;
353
+ //tab
354
+ --color-sf-tab-border: #e9ecef;
365
355
 
366
- @function shade-color($color, $percentage) {
367
- @return mix($black, $color, $percentage);
368
- }
356
+ //stepper
357
+ --color-sf-stepper: #fff;
369
358
 
370
- @function tint-color($color, $percentage) {
371
- @return mix($white, $color, $percentage);
359
+ --color-sf-shadow-color: #{#000};
360
+ --color-sf-shadow-color1: #{#fff};
372
361
  }
373
362
 
374
- :root {
375
- --color-sf-content-bg-color: #ffffff;
376
- --color-sf-content-bg-color-alt1: #f8f9fa;
377
- --color-sf-content-bg-color-alt2: #e9ecef;
378
- --color-sf-content-bg-color-alt3: #dee2e6;
379
- --color-sf-content-bg-color-alt4: #ced4da;
363
+ .e-dark-mode{
364
+ --color-sf-content-bg-color: #212529;
365
+ --color-sf-content-bg-color-alt1: #2b3035;
366
+ --color-sf-content-bg-color-alt2: #343a40;
367
+ --color-sf-content-bg-color-alt3: #495057;
368
+ --color-sf-content-bg-color-alt4: #1a1d20;
380
369
  --color-sf-content-bg-color-alt5: #adb5bd;
381
- --color-sf-content-bg-color-hover: #e9ecef;
382
- --color-sf-content-bg-color-pressed: #ced4da;
383
- --color-sf-content-bg-color-focus: #e9ecef;
370
+ --color-sf-content-bg-color-hover: #2b3035;
371
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
372
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
384
373
  --color-sf-content-bg-color-selected: #0d6efd;
385
- --color-sf-content-bg-color-dragged: #ced4da;
386
- --color-sf-content-bg-color-disabled: #ffffff;
387
- --color-sf-flyout-bg-color: #ffffff;
388
- --color-sf-flyout-bg-color-hover: #e9ecef;
374
+ --color-sf-content-bg-color-dragged: #343a40;
375
+ --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color-alt2);
376
+ --color-sf-flyout-bg-color: #212529;
377
+ --color-sf-flyout-bg-color-hover: #2b3035;
389
378
  --color-sf-flyout-bg-color-pressed: #0d6efd;
390
- --color-sf-flyout-bg-color-focus: #e9ecef;
391
- --color-sf-overlay-bg-color: rgba(#000000, .5);
392
- --color-sf-table-bg-color-hover: #eff1f4;
393
- --color-sf-table-bg-color-pressed: #dee2e6;
394
- --color-sf-table-bg-color-selected: #e6eaed;
379
+ --color-sf-flyout-bg-color-focus: #2b3035;
380
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
381
+ --color-sf-table-bg-color-hover: rgba(255, 255, 255, .07);
382
+ --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
383
+ --color-sf-table-bg-color-selected: rgba(255, 255, 255, .1);
395
384
 
396
385
  // text-color
397
- --color-sf-content-text-color: #212529;
398
- --color-sf-content-text-color-alt1: #343a40;
399
- --color-sf-content-text-color-alt2: #495057;
400
- --color-sf-content-text-color-alt3: #6c757d;
401
- --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
386
+ --color-sf-content-text-color: #dee2e6;
387
+ --color-sf-content-text-color-alt1: rgba(222, 226, 230, .75);
388
+ --color-sf-content-text-color-alt2: rgba(222, 226, 230, .5);
389
+ --color-sf-content-text-color-alt3: rgba(222, 226, 230, .25);
390
+ --color-sf-content-text-color-hover: #fff;
402
391
  --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
403
- --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
404
- --color-sf-content-text-color-selected: #ffffff;
405
- --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
406
- --color-sf-content-text-color-disabled: #adb5bd;
392
+ --color-sf-content-text-color-focus: #fff;
393
+ --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
394
+ --color-sf-content-text-color-dragged: #fff;
395
+ --color-sf-content-text-color-disabled: rgba(222, 226, 230, .75);
407
396
  --color-sf-placeholder-text-color: #6c757d;
408
397
  --color-sf-flyout-text-color: var(--color-sf-content-text-color);
409
398
  --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
410
- --color-sf-flyout-text-color-pressed: #ffffff;
399
+ --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
411
400
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
401
+ --color-sf-flyout-text-color-disabled: rgba(222, 226, 230, .5);
412
402
  --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
413
403
  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
414
404
  --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
415
405
 
416
406
  // icon-color
417
- --color-sf-icon-color: var(--color-sf-content-text-color-alt3);
418
- --color-sf-icon-color-hover: var(--color-sf-content-text-color-alt1);
419
- --color-sf-icon-color-pressed: var(--color-sf-content-text-color);
420
- --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
407
+ --color-sf-icon-color: #adb5bd;
408
+ --color-sf-icon-color-hover: #dee2e6;
409
+ --color-sf-icon-color-pressed: #f8f9fa;
410
+ --color-sf-icon-color-disabled: #adb5bd;
411
+
412
+ // close-icon-color
413
+ --color-sf-close-icon-color: rgba(255, 255, 255, .5);
414
+ --color-sf-close-icon-color-hover: rgba(255, 255, 255, .75);
415
+ --color-sf-close-icon-color-pressed: rgba(255, 255, 255, 1);
416
+ --color-sf-close-icon-color-disabled: rgba(255, 255, 255, .25);
421
417
 
422
418
  // border-color
423
- --color-sf-border-light: #dee2e6;
424
- --color-sf-border: #ced4da;
425
- --color-sf-border-dark: #adb5bd;
426
- --color-sf-border-hover: #ced4da;
427
- --color-sf-border-pressed: #adb5bd;
428
- --color-sf-border-focus: var(--color-sf-border);
429
- --color-sf-border-selected: var(--color-sf-border-dark);
430
- --color-sf-border-dragged: var(--color-sf-border-light);
431
- --color-sf-border-disabled: var(--color-sf-border-light);
432
- --color-sf-border-warning: #ffc107;
433
- --color-sf-border-error: #dc3545;
434
- --color-sf-border-success: #198754;
435
- --color-sf-spreadsheet-gridline: var(--color-sf-border-light);
436
- --color-sf-flyout-border: var(--color-sf-border-light);
419
+ --color-sf-border-light: #495057;
420
+ --color-sf-border: #495057;
421
+ --color-sf-border-dark: #6c757d;
422
+ --color-sf-border-hover: #495057;
423
+ --color-sf-border-pressed: #495057;
424
+ --color-sf-border-focus: #86d7fe;
425
+ --color-sf-border-selected: #86d7fe;
426
+ --color-sf-border-dragged: #495057;
427
+ --color-sf-border-disabled: #495057;
428
+ --color-sf-border-warning: #ffda6a;
429
+ --color-sf-border-error: #ea868f;
430
+ --color-sf-border-success: #75b798;
431
+ --color-sf-spreadsheet-gridline: #dee2e6;
432
+ --color-sf-flyout-border: rgba(255, 255, 255, .15);
437
433
 
438
434
  //sf Variables
439
- --color-sf-primary: #0d6efd;
440
- --color-sf-primary-text-color: #ffffff;
435
+ --color-sf-primary: rgba(13, 110, 253, 1);
436
+ --color-sf-primary-text-color: #fff;
441
437
  --color-sf-primary-light: #86b7fe;
442
- --color-sf-primary-lighter: #e7f1ff;
443
- --color-sf-secondary: #6c757d;
444
- --color-sf-success: #198754;
445
- --color-sf-info: #0dcaf0;
446
- --color-sf-warning: #ffc107;
447
- --color-sf-danger: #dc3545;
448
- --color-sf-success-light: #d1e7dd;
449
- --color-sf-info-light: #cff4fc;
450
- --color-sf-warning-light: #fff3cd;
451
- --color-sf-danger-light: #f8d7da;
452
- --color-sf-success-dark: #115c39;
453
- --color-sf-info-dark: #066477;
454
- --color-sf-warning-dark: #866500;
455
- --color-sf-danger-dark: #bd2130;
456
- --color-sf-success-light-alt: #d1e7dd;
457
- --color-sf-info-light-alt: #cff4fc;
458
- --color-sf-warning-light-alt: #fff3cd;
459
- --color-sf-danger-light-alt: #f8d7da;
438
+ --color-sf-primary-lighter: #031633;
439
+ --color-sf-primary-dark: #073ba6;
440
+ --color-sf-primary-darker: #6ea8fe;
441
+ --color-sf-secondary: rgba(108, 117, 125, 1);
442
+ --color-sf-success: rgba(25, 135, 84, 1);
443
+ --color-sf-info: rgba(13, 202, 240, 1);
444
+ --color-sf-warning: rgba(255, 193, 7, 1);
445
+ --color-sf-danger: rgba(220, 53, 69, 1);
446
+ --color-sf-success-light: #75b798;
447
+ --color-sf-info-light: #6edff6;
448
+ --color-sf-warning-light: #ffda6a;
449
+ --color-sf-danger-light: #ea868f;
450
+ --color-sf-success-dark: #75b798;
451
+ --color-sf-info-dark: #6edff6;
452
+ --color-sf-warning-dark: #ffda6a;
453
+ --color-sf-danger-dark: #ea868f;
454
+ --color-sf-success-light-alt: #051b11;
455
+ --color-sf-info-light-alt: #032830;
456
+ --color-sf-warning-light-alt: #332701;
457
+ --color-sf-danger-light-alt: #2c0b0e;
458
+ --color-sf-primary-shadow: 13, 110, 253;
459
+ --color-sf-secondary-shadow: 108, 117, 125;
460
+ --color-sf-success-shadow: 25, 135, 84;
461
+ --color-sf-info-shadow: 13, 202, 240;
462
+ --color-sf-warning-shadow: 255, 193, 7;
463
+ --color-sf-danger-shadow: 220, 53, 69;
464
+ --color-sf-black: 0, 0, 0;
465
+ --color-sf-white: 255, 255, 255;
460
466
 
461
467
  // Primary-button
462
468
  --color-sf-primary-bg-color: var(--color-sf-primary);
@@ -466,7 +472,7 @@ $white: #fff !default;
466
472
  --color-sf-primary-border-color-hover: #0a58ca;
467
473
  --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
468
474
  --color-sf-primary-bg-color-pressed: #0a58ca;
469
- --color-sf-primary-border-color-pressed: #0a53be;
475
+ --color-sf-primary-border-color-pressed: #0a58ca;
470
476
  --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
471
477
  --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
472
478
  --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
@@ -474,11 +480,11 @@ $white: #fff !default;
474
480
  --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
475
481
  --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
476
482
  --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
477
-
483
+
478
484
  // Secondary-button
479
485
  --color-sf-secondary-bg-color: var(--color-sf-secondary);
480
486
  --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
481
- --color-sf-secondary-text-color: #ffffff;
487
+ --color-sf-secondary-text-color: #fff;
482
488
  --color-sf-secondary-bg-color-hover: #5c636a;
483
489
  --color-sf-secondary-border-color-hover: #565e64;
484
490
  --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
@@ -491,16 +497,16 @@ $white: #fff !default;
491
497
  --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
492
498
  --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
493
499
  --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
494
-
500
+
495
501
  // Success-button
496
502
  --color-sf-success-bg-color: var(--color-sf-success);
497
503
  --color-sf-success-border-color: var(--color-sf-success-bg-color);
498
- --color-sf-success-text: #ffffff;
504
+ --color-sf-success-text: #fff;
499
505
  --color-sf-success-bg-color-hover: #157347;
500
506
  --color-sf-success-border-color-hover: #146c43;
501
507
  --color-sf-success-text-hover: var(--color-sf-success-text);
502
508
  --color-sf-success-bg-color-pressed: #146c43;
503
- --color-sf-success-border-color-pressed: #13653f;
509
+ --color-sf-success-border-color-pressed: #15803d;
504
510
  --color-sf-success-text-pressed: var(--color-sf-success-text);
505
511
  --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
506
512
  --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
@@ -508,11 +514,11 @@ $white: #fff !default;
508
514
  --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
509
515
  --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
510
516
  --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
511
-
517
+
512
518
  // Warning-button
513
519
  --color-sf-warning-bg-color: var(--color-sf-warning);
514
520
  --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
515
- --color-sf-warning-text: #000000;
521
+ --color-sf-warning-text: #000;
516
522
  --color-sf-warning-bg-color-hover: #ffca2c;
517
523
  --color-sf-warning-border-color-hover: #ffc720;
518
524
  --color-sf-warning-text-hover: var(--color-sf-warning-text);
@@ -529,7 +535,7 @@ $white: #fff !default;
529
535
  // Info-button
530
536
  --color-sf-info-bg-color: var(--color-sf-info);
531
537
  --color-sf-info-border-color: var(--color-sf-info-bg-color);
532
- --color-sf-info-text: #000000;
538
+ --color-sf-info-text: #000;
533
539
  --color-sf-info-bg-color-hover: #31d2f2;
534
540
  --color-sf-info-border-color-hover: #25cff2;
535
541
  --color-sf-info-text-hover: var(--color-sf-info-text);
@@ -542,11 +548,11 @@ $white: #fff !default;
542
548
  --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
543
549
  --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
544
550
  --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
545
-
551
+
546
552
  // danger-button
547
553
  --color-sf-danger-bg-color: var(--color-sf-danger);
548
554
  --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
549
- --color-sf-danger-text: #ffffff;
555
+ --color-sf-danger-text: #fff;
550
556
  --color-sf-danger-bg-color-hover: #bb2d3b;
551
557
  --color-sf-danger-border-color-hover: #b02a37;
552
558
  --color-sf-danger-text-hover: var(--color-sf-danger-text);
@@ -569,459 +575,521 @@ $white: #fff !default;
569
575
  --color-sf-info-outline: var(--color-sf-info-bg-color);
570
576
 
571
577
  // Tooltip
572
- --color-sf-tooltip-bg-color: #212529;
578
+ --color-sf-tooltip-bg-color: rgba(255, 255, 255, .9);
573
579
  --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
574
- --color-sf-toooltip-text-color: #f9fafb;
580
+ --color-sf-tooltip-text-color: #212529;
575
581
 
576
- //appbar Light
582
+ //Light
577
583
  --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
578
584
  --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
579
585
  --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
580
586
  --color-sf-appbar-hover-bg-color-alt1: $transparent;
581
587
 
582
588
  //dark
583
- --color-sf-appbar-bg-color-alt2: #212529;
584
- --color-sf-appbar-color-alt2: #ffffff;
589
+ --color-sf-appbar-bg-color-alt2: #dee2e6;
590
+ --color-sf-appbar-color-alt2: #212529;
585
591
  --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
586
592
  --color-sf-appbar-hover-bg-color-alt2: $transparent;
587
593
 
588
594
  //diagram Palette color
589
- --color-sf-diagram-palette-background: #ffffff;
590
- --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
595
+ --color-sf-diagram-palette-background: #dee2e6;
596
+ --color-sf-diagram-palette-hover-background: #ced4da;
591
597
 
592
598
  //rating
593
599
  --color-sf-rating-selected-color: var(--color-sf-primary);
594
- --color-sf-rating-unrated-color: var(--color-sf-content-text-color-alt3);
595
- --color-sf-rating-selected-disabled-color: var(--color-sf-content-bg-color-alt5);
596
- --color-sf-rating-unrated-disabled-color: var(--color-sf-content-bg-color-alt4);
597
- --color-sf-rating-selected-hover-color: var(--color-sf-content-text-color-alt3);
600
+ --color-sf-rating-unrated-color: #adb5bd;
601
+ --color-sf-rating-selected-disabled-color: #6c757d;
602
+ --color-sf-rating-unrated-disabled-color: #495057;
603
+ --color-sf-rating-selected-hover-color: #adb5bd;
598
604
  --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
599
605
  --color-sf-rating-pressed-color: #599bfe;
600
606
 
601
607
  //Message default
602
- --color-sf-msg-color: #41464b;
603
- --color-sf-msg-bg-color: #e2e3e5;
604
- --color-sf-msg-border-color: #d3d6d8;
605
- --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
608
+ --color-sf-msg-color: #a7acb1;
609
+ --color-sf-msg-bg-color: #161719;
610
+ --color-sf-msg-border-color: #41464b;
611
+ --color-sf-msg-color-alt1: var(--color-sf-msg-color);
606
612
  --color-sf-msg-bg-color-alt1: $transparent;
607
- --color-sf-msg-border-color-alt1: #9ca3af;
608
- --color-sf-msg-color-alt2: #ffffff;
609
- --color-sf-msg-bg-color-alt2: var(--color-sf-content-text-color-alt3);
613
+ --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
614
+ --color-sf-msg-color-alt2: #fff;
615
+ --color-sf-msg-bg-color-alt2: #6c757d;
610
616
  --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
611
- --color-sf-msg-icon-color: var(--color-sf-content-text-color);
612
- --color-sf-msg-icon-color-alt1: var(--color-sf-content-text-color);
613
- --color-sf-msg-icon-color-alt2: #ffffff;
614
- --color-sf-msg-close-icon-color: var(--color-sf-icon-color);
615
- --color-sf-msg-close-icon-color-alt1: var(--color-sf-icon-color);
616
- --color-sf-msg-close-icon-color-alt2: #ffffff;
617
+ --color-sf-msg-icon-color: var(--color-sf-msg-color);
618
+ --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
619
+ --color-sf-msg-icon-color-alt2: #fff;
620
+ --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
621
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
622
+ --color-sf-msg-close-icon-color-alt2: #fff;
617
623
 
618
624
  //Message danger
619
- --color-sf-msg-danger-color: #842029;
620
- --color-sf-msg-danger-bg-color: var(--color-sf-danger-light);
621
- --color-sf-msg-danger-border-color: #f5c2c7;
622
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
625
+ --color-sf-msg-danger-color: #ea868f;
626
+ --color-sf-msg-danger-bg-color: #2c0b0e;
627
+ --color-sf-msg-danger-border-color: #842029;
628
+ --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
623
629
  --color-sf-msg-danger-bg-color-alt1: $transparent;
624
- --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-color-alt1);
625
- --color-sf-msg-danger-color-alt2: #ffffff;
626
- --color-sf-msg-danger-bg-color-alt2: var(--color-sf-danger);
630
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
631
+ --color-sf-msg-danger-color-alt2: #fff;
632
+ --color-sf-msg-danger-bg-color-alt2: #dc3545;
627
633
  --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
628
634
  --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
629
- --color-sf-msg-danger-icon-color-alt1: var(--color-sf-danger);
630
- --color-sf-msg-danger-icon-color-alt2: #ffffff;
631
- --color-sf-msg-danger-close-icon-color: var(--color-sf-icon-color);
632
- --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-icon-color);
633
- --color-sf-msg-danger-close-icon-color-alt2: #ffffff;
635
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
636
+ --color-sf-msg-danger-icon-color-alt2: #fff;
637
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
638
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
639
+ --color-sf-msg-danger-close-icon-color-alt2: #fff;
634
640
 
635
641
  //Message success
636
- --color-sf-msg-success-color: #0f5132;
637
- --color-sf-msg-success-bg-color: var(--color-sf-success-light);
638
- --color-sf-msg-success-border-color: #badbcc;
639
- --color-sf-msg-success-color-alt1: var(--color-sf-success-dark);
642
+ --color-sf-msg-success-color: #75b798;
643
+ --color-sf-msg-success-bg-color: #051b11;
644
+ --color-sf-msg-success-border-color: #0f5132;
645
+ --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
640
646
  --color-sf-msg-success-bg-color-alt1: $transparent;
641
- --color-sf-msg-success-border-color-alt1: var(--color-sf-success);
642
- --color-sf-msg-success-color-alt2: #ffffff;
643
- --color-sf-msg-success-bg-color-alt2: var(--color-sf-success);
647
+ --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
648
+ --color-sf-msg-success-color-alt2: #fff;
649
+ --color-sf-msg-success-bg-color-alt2: #198754;
644
650
  --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
645
- --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color-alt1);
646
- --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color-alt1);
647
- --color-sf-msg-success-icon-color-alt2: #ffffff;
648
- --color-sf-msg-success-close-icon-color: var(--color-sf-icon-color);
649
- --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-icon-color);
650
- --color-sf-msg-success-close-icon-color-alt2: #ffffff;
651
+ --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
652
+ --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
653
+ --color-sf-msg-success-icon-color-alt2: #fff;
654
+ --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
655
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
656
+ --color-sf-msg-success-close-icon-color-alt2: #fff;
651
657
 
652
658
  //Message warning
653
- --color-sf-msg-warning-color: #664d03;
654
- --color-sf-msg-warning-bg-color: var(--color-sf-warning-light);
655
- --color-sf-msg-warning-border-color: #ffecb5;
656
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning-dark);
659
+ --color-sf-msg-warning-color: #ffda6a;
660
+ --color-sf-msg-warning-bg-color: #332701;
661
+ --color-sf-msg-warning-border-color: #997404;
662
+ --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
657
663
  --color-sf-msg-warning-bg-color-alt1: $transparent;
658
- --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-color-alt1);
659
- --color-sf-msg-warning-color-alt2: var(--color-sf-content-text-color);
660
- --color-sf-msg-warning-bg-color-alt2: var(--color-sf-warning);
664
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
665
+ --color-sf-msg-warning-color-alt2: #212529;
666
+ --color-sf-msg-warning-bg-color-alt2: #ffc107;
661
667
  --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
662
- --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color-alt1);
663
- --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color-alt1);
664
- --color-sf-msg-warning-icon-color-alt2: var(--color-sf-content-text-color);
665
- --color-sf-msg-warning-close-icon-color: var(--color-sf-icon-color);
666
- --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-icon-color);
667
- --color-sf-msg-warning-close-icon-color-alt2: var(--color-sf-content-text-color);
668
+ --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
669
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
670
+ --color-sf-msg-warning-icon-color-alt2: #212529;
671
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
672
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
673
+ --color-sf-msg-warning-close-icon-color-alt2: #212529;
668
674
 
669
675
  //Message info
670
- --color-sf-msg-info-color: #055160;
671
- --color-sf-msg-info-bg-color: var(--color-sf-info-light);
672
- --color-sf-msg-info-border-color: #b5effb;
673
- --color-sf-msg-info-color-alt1: var(--color-sf-info-dark);
676
+ --color-sf-msg-info-color: #6edff6;
677
+ --color-sf-msg-info-bg-color: #032830;
678
+ --color-sf-msg-info-border-color: #087990;
679
+ --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
674
680
  --color-sf-msg-info-bg-color-alt1: $transparent;
675
- --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-color-alt1);
676
- --color-sf-msg-info-color-alt2: var(--color-sf-content-text-color);
677
- --color-sf-msg-info-bg-color-alt2: var(--color-sf-info);
678
- --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
679
- --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color-alt1);
680
- --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color-alt1);
681
- --color-sf-msg-info-icon-color-alt2: var(--color-sf-content-text-color);
682
- --color-sf-msg-info-close-icon-color: var(--color-sf-icon-color);
683
- --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-icon-color);
684
- --color-sf-msg-info-close-icon-color-alt2: var(--color-sf-content-text-color);
681
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
682
+ --color-sf-msg-info-color-alt2: #212529;
683
+ --color-sf-msg-info-bg-color-alt2: #0dcaf0;
684
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
685
+ --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
686
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
687
+ --color-sf-msg-info-icon-color-alt2: #212529;
688
+ --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
689
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
690
+ --color-sf-msg-info-close-icon-color-alt2: #212529;
691
+
692
+ //badge
693
+ --color-sf-badge-light-bg-color: #faf9fa;
694
+ --color-sf-badge-light-border-color: #faf9fa;
695
+ --color-sf-badge-light-text-color: #000;
696
+ --color-sf-badge-dark-bg-color: #212529;
697
+ --color-sf-badge-dark-border-color: #212529;
698
+ --color-sf-badge-dark-text-color: #fff;
699
+
700
+ //tab
701
+ --color-sf-tab-border: #343a40;
702
+
703
+ //stepper
704
+ --color-sf-stepper: #212529;
705
+
706
+ --color-sf-shadow-color: #{#fff};
707
+ --color-sf-shadow-color1: #{#000};
685
708
  }
686
709
 
687
- .e-dark-mode{
688
- --color-sf-content-bg-color: #212529;
689
- --color-sf-content-bg-color-alt1: #282d31;
690
- --color-sf-content-bg-color-alt2: #343a40;
691
- --color-sf-content-bg-color-alt3: #dee2e6;
692
- --color-sf-content-bg-color-alt4: #6c757d;
693
- --color-sf-content-bg-color-alt5: #adb5bd;
694
- --color-sf-content-bg-color-hover: #31373d;
695
- --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
696
- --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
697
- --color-sf-content-bg-color-selected: #0d6efd;
698
- --color-sf-content-bg-color-dragged: #343a40;
699
- --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color);
700
- --color-sf-flyout-bg-color: #343a40;
701
- --color-sf-flyout-bg-color-hover: #444c54;
702
- --color-sf-flyout-bg-color-pressed: #0d6efd;
703
- --color-sf-flyout-bg-color-focus: #444c54;
704
- --color-sf-overlay-bg-color: rgba(#000000, .4);
705
- --color-sf-table-bg-color-hover: var(--color-sf-content-bg-color-hover);
706
- --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-pressed);
707
- --color-sf-table-bg-color-selected: #3c444b;
710
+ // backgroundcolor
711
+ $content-bg-color: mapcolorvariable('content-bg-color') !default;
712
+ $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
713
+ $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
714
+ $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
715
+ $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
716
+ $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
717
+ $content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
718
+ $content-bg-color-pressed: mapcolorvariable('content-bg-color-pressed') !default;
719
+ $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
720
+ $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
721
+ $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
722
+ $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
723
+ $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
724
+ $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
725
+ $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
726
+ $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
727
+ $overlay-bg: mapcolorvariable('overlay-bg-color');
728
+ $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
729
+ $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
730
+ $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
708
731
 
709
- // text-color
710
- --color-sf-content-text-color: #ffffff;
711
- --color-sf-content-text-color-alt1: #e9ecef;
712
- --color-sf-content-text-color-alt2: #ced4da;
713
- --color-sf-content-text-color-alt3: #7b848d;
714
- --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
715
- --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
716
- --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
717
- --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
718
- --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
719
- --color-sf-content-text-color-disabled: #6c757d;
720
- --color-sf-placeholder-text-color: #6c757d;
721
- --color-sf-flyout-text-color: var(--color-sf-content-text-color);
722
- --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
723
- --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
724
- --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
725
- --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
726
- --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
727
- --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
732
+ // text-color
733
+ $content-text-color: mapcolorvariable('content-text-color') !default;
734
+ $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
735
+ $content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
736
+ $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
737
+ $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
738
+ $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
739
+ $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
740
+ $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
741
+ $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
742
+ $content-text-color-disabled: mapcolorvariable('content-text-color-disabled') !default;
743
+ $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
744
+ $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
745
+ $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
746
+ $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
747
+ $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
748
+ $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
749
+ $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
750
+ $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
751
+
752
+ // icon-color
753
+ $icon-color: mapcolorvariable('icon-color') !default;
754
+ $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
755
+ $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
756
+ $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
757
+
758
+ // border-color
759
+ $border-light: mapcolorvariable('border-light') !default;
760
+ $border: mapcolorvariable('border') !default;
761
+ $border-dark: mapcolorvariable('border-dark') !default;
762
+ $border-hover: mapcolorvariable('border-hover') !default;
763
+ $border-pressed: mapcolorvariable('border-pressed') !default;
764
+ $border-focus: mapcolorvariable('border-focus') !default;
765
+ $border-selected: mapcolorvariable('border-selected') !default;
766
+ $border-dragged:mapcolorvariable('border-dragged') !default;
767
+ $border-disabled: mapcolorvariable('border-disabled') !default;
768
+ $border-warning: mapcolorvariable('border-warning') !default;
769
+ $border-error: mapcolorvariable('border-error') !default;
770
+ $border-success: mapcolorvariable('border-success') !default;
771
+ $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
772
+ $flyout-border: mapcolorvariable('flyout-border') !default;
773
+
774
+ //sf Variables
775
+ $primary: mapcolorvariable('primary') !default;
776
+ $secondary: mapcolorvariable('secondary') !default;
777
+ $primary-text-color: mapcolorvariable('primary-text-color') !default;
778
+ $primary-light: mapcolorvariable('primary-light') !default;
779
+ $primary-lighter: mapcolorvariable('primary-lighter') !default;
780
+ $success: mapcolorvariable('success') !default;
781
+ $info: mapcolorvariable('info') !default;
782
+ $warning: mapcolorvariable('warning') !default;
783
+ $danger: mapcolorvariable('danger') !default;
784
+ $success-light: mapcolorvariable('success-light') !default;
785
+ $info-light: mapcolorvariable('info-light') !default;
786
+ $warning-light: mapcolorvariable('warning-light') !default;
787
+ $danger-light: mapcolorvariable('danger-light') !default;
788
+ $success-dark: mapcolorvariable('success-dark') !default;
789
+ $info-dark: mapcolorvariable('info-dark') !default;
790
+ $warning-dark: mapcolorvariable('warning-dark') !default;
791
+ $danger-dark: mapcolorvariable('danger-dark') !default;
792
+ $success-light-alt: mapcolorvariable('success-light-alt') !default;
793
+ $info-light-alt: mapcolorvariable('info-light-alt') !default;
794
+ $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
795
+ $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
796
+
797
+ // Primary-button
798
+ $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
799
+ $primary-border-color: mapcolorvariable('primary-border-color') !default;
800
+ $primary-text: mapcolorvariable('primary-text') !default;
801
+ $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
802
+ $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
803
+ $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
804
+ $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
805
+ $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
806
+ $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
807
+ $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
808
+ $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
809
+ $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
810
+ $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
811
+ $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
812
+ $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
813
+
814
+ // Secondary-button
815
+ $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
816
+ $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
817
+ $secondary-text-color: mapcolorvariable('secondary-text-color') !default;
818
+ $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
819
+ $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
820
+ $secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
821
+ $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
822
+ $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
823
+ $secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
824
+ $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
825
+ $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
826
+ $secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
827
+ $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
828
+ $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
829
+ $secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
830
+
831
+ // Success-button
832
+ $success-bg-color: mapcolorvariable('success-bg-color') !default;
833
+ $success-border-color: mapcolorvariable('success-border-color') !default;
834
+ $success-text: mapcolorvariable('success-text') !default;
835
+ $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
836
+ $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
837
+ $success-text-hover: mapcolorvariable('success-text-hover') !default;
838
+ $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
839
+ $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
840
+ $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
841
+ $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
842
+ $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
843
+ $success-text-focus: mapcolorvariable('success-text-focus') !default;
844
+ $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
845
+ $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
846
+ $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
847
+
848
+ // Warning-button
849
+ $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
850
+ $warning-border-color: mapcolorvariable('warning-border-color') !default;
851
+ $warning-text: mapcolorvariable('warning-text') !default;
852
+ $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
853
+ $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
854
+ $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
855
+ $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
856
+ $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
857
+ $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
858
+ $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
859
+ $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
860
+ $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
861
+ $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
862
+ $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
863
+ $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
864
+
865
+ // Info-button
866
+ $info-bg-color: mapcolorvariable('info-bg-color') !default;
867
+ $info-border-color: mapcolorvariable('info-border-color') !default;
868
+ $info-text: mapcolorvariable('info-text') !default;
869
+ $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
870
+ $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
871
+ $info-text-hover: mapcolorvariable('info-text-hover') !default;
872
+ $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
873
+ $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
874
+ $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
875
+ $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
876
+ $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
877
+ $info-text-focus: mapcolorvariable('info-text-focus') !default;
878
+ $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
879
+ $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
880
+ $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
881
+
882
+ // danger-button
883
+ $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
884
+ $danger-border-color: mapcolorvariable('danger-border-color') !default;
885
+ $danger-text: mapcolorvariable('danger-text') !default;
886
+ $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
887
+ $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
888
+ $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
889
+ $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
890
+ $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
891
+ $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
892
+ $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
893
+ $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
894
+ $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
895
+ $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
896
+ $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
897
+ $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
728
898
 
729
- // icon-color
730
- --color-sf-icon-color: #adb5bd;
731
- --color-sf-icon-color-hover: #dee2e6;
732
- --color-sf-icon-color-pressed: #f8f9fa;
733
- --color-sf-icon-color-disabled: #adb5bd;
899
+ //Outline button
900
+ $primary-outline: mapcolorvariable('primary-outline') !default;
901
+ $secondary-outline: mapcolorvariable('secondary-outline') !default;
902
+ $warning-outline: mapcolorvariable('warning-outline') !default;
903
+ $danger-outline: mapcolorvariable('danger-outline') !default;
904
+ $success-outline: mapcolorvariable('success-outline') !default;
905
+ $info-outline: mapcolorvariable('info-outline') !default;
734
906
 
735
- // border-color
736
- --color-sf-border-light: #444c54;
737
- --color-sf-border: #6c757d;
738
- --color-sf-border-dark: #adb5bd;
739
- --color-sf-border-hover: #495057;
740
- --color-sf-border-pressed: #6c757d;
741
- --color-sf-border-focus: var(--color-sf-border-hover);
742
- --color-sf-border-selected: var(--color-sf-border);
743
- --color-sf-border-dragged: var(--color-sf-border);
744
- --color-sf-border-disabled: var(--color-sf-border-light);
745
- --color-sf-border-warning: #ffca2b;
746
- --color-sf-border-error: #eb8c95;
747
- --color-sf-border-success: #2ed889;
748
- --color-sf-spreadsheet-gridline: #dee2e6;
749
- --color-sf-flyout-border: var(--color-sf-border-hover);
907
+ // Tooltip
908
+ $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
909
+ $tooltip-border: mapcolorvariable('tooltip-border') !default;
910
+ $tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
750
911
 
751
- //sf Variables
752
- --color-sf-primary: #0d6efd;
753
- --color-sf-primary-text-color: #ffffff;
754
- --color-sf-primary-light: #86b7fe;
755
- --color-sf-primary-lighter: #031633;
756
- --color-sf-secondary: #6c757d;
757
- --color-sf-success: #21b26f;
758
- --color-sf-info: #0dcaf0;
759
- --color-sf-warning: #ffc107;
760
- --color-sf-danger: #e4606d;
761
- --color-sf-success-light: #d1e7dd;
762
- --color-sf-info-light: #cff4fc;
763
- --color-sf-warning-light: #fff3cd;
764
- --color-sf-danger-light: #f8d7da;
765
- --color-sf-success-dark: #115c39;
766
- --color-sf-info-dark: #066477;
767
- --color-sf-warning-dark: #866500;
768
- --color-sf-danger-dark: #bd2130;
769
- --color-sf-success-light-alt: #09311e;
770
- --color-sf-info-light-alt: #066477;
771
- --color-sf-warning-light-alt: #a07e00;
772
- --color-sf-danger-light-alt: #7c151f;
773
- --color-sf-badge-primary-bg-color-darken: darken($primary, 10%);
774
- --color-sf-badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
775
- --color-sf-badge-success-bg-color-darken: darken($success-light, 10%);
776
- --color-sf-badge-danger-bg-color-darken: darken($danger-light, 10%);
777
- --color-sf-badge-warning-bg-color-darken: darken($warning-light, 10%);
778
- --color-sf-badge-info-bg-color-darken: darken($info-light, 10%);
779
- --color-sf-badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
780
- --color-sf-badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
781
- --color-sf-breadcrumb-item-hover-color: darken($primary-outline, 10%);
782
- --color-sf-breadcrumb-item-active-color: darken($primary-outline, 15%);
783
- --color-sf-breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
784
- --color-sf-calendar-yeardecade-selected-hover-bg: darken(primary-bg-color, 10%);
785
- --color-sf-calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
786
- --color-sf-tab-alt-wrap-hover-color: darken($secondary, 15%);
787
- --color-sf-treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
788
- --color-sf-de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
789
- --color-sf-de-toggle-border-color: darken($secondary-bg-color, 12.5%);
790
- --color-sf-de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
791
- --color-sf-de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
792
- --color-sf-de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
793
- --color-sf-connector-point-hover-color: darken($primary, 10%);
794
- --color-sf-gantt-connected-task: lighten($primary, 20%);
795
- --color-sf-gantt-active-parent-task: lighten($warning-text, 10%);
796
- --color-sf-schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
797
- --color-sf-timepicker-active-border-color: darken($gray-600, 10%);
798
- --color-sf-hdr-selection-border-color: darken($border-light, 8%);
912
+ //appbar
913
+ //Light
914
+ $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
915
+ $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
916
+ $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
917
+ $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
799
918
 
800
- // Primary-button
801
- --color-sf-primary-bg-color: var(--color-sf-primary);
802
- --color-sf-primary-border-color: var(--color-sf-primary);
803
- --color-sf-primary-text: var(--color-sf-primary-text-color);
804
- --color-sf-primary-bg-color-hover: #2360cf;
805
- --color-sf-primary-border-color-hover: #215ac3;
806
- --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
807
- --color-sf-primary-bg-color-pressed: #2360cf;
808
- --color-sf-primary-border-color-pressed: #1a50b0;
809
- --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
810
- --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
811
- --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
812
- --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
813
- --color-sf-primary-bg-color-disabled: rgba(#0d6efd, .65);
814
- --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
815
- --color-sf-primary-text-disabled: rgba(#ffffff, .65);
919
+ //dark
920
+ $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
921
+ $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
922
+ $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
923
+ $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
816
924
 
817
- // Secondary-button
818
- --color-sf-secondary-bg-color: var(--color-sf-secondary);
819
- --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
820
- --color-sf-secondary-text-color: #ffffff;
821
- --color-sf-secondary-bg-color-hover: #5c636a;
822
- --color-sf-secondary-border-color-hover: #565e64;
823
- --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
824
- --color-sf-secondary-bg-color-pressed: #565e64;
825
- --color-sf-secondary-border-color-pressed: #5d6369;
826
- --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
827
- --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
828
- --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
829
- --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
830
- --color-sf-secondary-bg-color-disabled: rgba(#6c757d, .65);
831
- --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
832
- --color-sf-secondary-text-color-disabled: rgba(#ffffff, .65);
925
+ //diagram Palette color
926
+ $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
927
+ $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
928
+ $diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;
833
929
 
834
- // Success-button
835
- --color-sf-success-bg-color: var(--color-sf-success);
836
- --color-sf-success-border-color: var(--color-sf-success-bg-color);
837
- --color-sf-success-text: #ffffff;
838
- --color-sf-success-bg-color-hover: #166534;
839
- --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
840
- --color-sf-success-text-hover: var(--color-sf-success-text);
841
- --color-sf-success-bg-color-pressed: #15803d;
842
- --color-sf-success-border-color-pressed: var(--color-sf-success-bg-color-pressed);
843
- --color-sf-success-text-pressed: var(--color-sf-success-text);
844
- --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
845
- --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
846
- --color-sf-success-text-focus: var(--color-sf-success-text-hover);
847
- --color-sf-success-bg-color-disabled: rgba(#198754, .65);
848
- --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
849
- --color-sf-success-text-disabled: var(--color-sf-primary-text-disabled);
930
+ //rating
931
+ $rating-selected-color:mapcolorvariable('rating-selected-color') !default;
932
+ $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
933
+ $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
934
+ $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
935
+ $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color') !default;
936
+ $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
937
+ $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
850
938
 
851
- // Warning-button
852
- --color-sf-warning-bg-color: var(--color-sf-warning);
853
- --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
854
- --color-sf-warning-text: #000000;
855
- --color-sf-warning-bg-color-hover: #f8cb51;
856
- --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
857
- --color-sf-warning-text-hover: var(--color-sf-warning-text);
858
- --color-sf-warning-bg-color-pressed: #ffcd39;
859
- --color-sf-warning-border-color-pressed: var(-color-sf-warning-bg-color-pressed);
860
- --color-sf-warning-text-pressed: var(--color-sf-warning-text);
861
- --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
862
- --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
863
- --color-sf-warning-text-focus: var(--color-sf-warning-text-hover);
864
- --color-sf-warning-bg-color-disabled: rgba(#ffc107, .65);
865
- --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
866
- --color-sf-warning-text-disabled: rgba(#000000, .65);
939
+ //Message component
867
940
 
868
- // Info-button
869
- --color-sf-info-bg-color: var(--color-sf-info);
870
- --color-sf-info-border-color: var(--color-sf-info-bg-color);
871
- --color-sf-info-text: #000000;
872
- --color-sf-info-bg-color-hover: #31d2f2;
873
- --color-sf-info-border-color-hover: #25cff2;
874
- --color-sf-info-text-hover: var(--color-sf-info-text);
875
- --color-sf-info-bg-color-pressed: #25cff2;
876
- --color-sf-info-border-color-pressed: var(--color-sf-info-bg-color-pressed);
877
- --color-sf-info-text-pressed: var(--color-sf-info-text);
878
- --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
879
- --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
880
- --color-sf-info-text-focus: var(--color-sf-info-text-hover);
881
- --color-sf-info-bg-color-disabled: rgba(#0dcaf0, .65);
882
- --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
883
- --color-sf-info-text-disabled: rgba(#000000, .65);
941
+ //Message default
942
+ $msg-color: mapcolorvariable('msg-color') !default;
943
+ $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
944
+ $msg-border-color:mapcolorvariable('msg-border-color') !default;
945
+ $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
946
+ $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
947
+ $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
948
+ $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
949
+ $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
950
+ $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
951
+ $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
952
+ $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
953
+ $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
954
+ $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
955
+ $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
956
+ $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2') !default;
884
957
 
885
- // danger-button
886
- --color-sf-danger-bg-color: var(--color-sf-danger);
887
- --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
888
- --color-sf-danger-text: #ffffff;
889
- --color-sf-danger-bg-color-hover: #b91c1c;
890
- --color-sf-danger-border-color-hover: var(--color-sf-danger-bg-color-hover);
891
- --color-sf-danger-text-hover: var(--color-sf-danger-text);
892
- --color-sf-danger-bg-color-pressed: #991b1b;
893
- --color-sf-danger-border-color-pressed: var(--color-sf-danger-bg-color-pressed);
894
- --color-sf-danger-text-pressed: var(--color-sf-danger-text);
895
- --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
896
- --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
897
- --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
898
- --color-sf-danger-bg-color-disabled: rgba(#dc3545, .65);
899
- --color-sf-danger-border-color-disabled: var(--color-sf-danger-border-color-disabled);
900
- --color-sf-danger-text-disabled: rgba(#ffffff, .65);
958
+ //Message success
959
+ $msg-success-color: mapcolorvariable('msg-success-color') !default;
960
+ $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
961
+ $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
962
+ $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
963
+ $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
964
+ $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
965
+ $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
966
+ $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
967
+ $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
968
+ $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
969
+ $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
970
+ $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
971
+ $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
972
+ $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
973
+ $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
901
974
 
902
- //Outline button
903
- --color-sf-primary-outline: #408cfd;
904
- --color-sf-secondary-outline: #868e96;
905
- --color-sf-warning-outline: #ffce3a;
906
- --color-sf-danger-outline: #eb8c95;
907
- --color-sf-success-outline: #2ed889;
908
- --color-sf-info-outline: #3cd5f4;
975
+ //Message danger
976
+ $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
977
+ $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
978
+ $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
979
+ $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
980
+ $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
981
+ $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
982
+ $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
983
+ $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
984
+ $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
985
+ $msg-danger-icon-color: mapcolorvariable('msg-danger-icon-color') !default;
986
+ $msg-danger-icon-color-alt1: mapcolorvariable('msg-danger-icon-color-alt1') !default;
987
+ $msg-danger-icon-color-alt2: mapcolorvariable('msg-danger-icon-color-alt2') !default;
988
+ $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
989
+ $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
990
+ $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
909
991
 
910
- // Tooltip
911
- --color-sf-tooltip-bg-color: #e9ecef;
912
- --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
913
- --color-sf-toooltip-text-color: #212529;
992
+ //Message Info
993
+ $msg-info-color: mapcolorvariable('msg-info-color') !default;
994
+ $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
995
+ $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
996
+ $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
997
+ $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
998
+ $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
999
+ $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
1000
+ $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
1001
+ $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
1002
+ $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
1003
+ $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
1004
+ $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
1005
+ $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
1006
+ $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
1007
+ $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
914
1008
 
915
- //Light
916
- --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
917
- --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
918
- --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
919
- --color-sf-appbar-hover-bg-color-alt1: $transparent;
1009
+ //Message Warning
1010
+ $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
1011
+ $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
1012
+ $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
1013
+ $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
1014
+ $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
1015
+ $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
1016
+ $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
1017
+ $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
1018
+ $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
1019
+ $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
1020
+ $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
1021
+ $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
1022
+ $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
1023
+ $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
1024
+ $msg-warning-close-icon-color-alt2: mapcolorvariable('msg-warning-close-icon-color-alt2') !default;
920
1025
 
921
- //dark
922
- --color-sf-appbar-bg-color-alt2: var(--color-sf-content-bg-color-alt3);
923
- --color-sf-appbar-color-alt2: #212529;
924
- --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
925
- --color-sf-appbar-hover-bg-color-alt2: $transparent;
1026
+ //badge
1027
+ $badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
1028
+ $badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
1029
+ $badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
1030
+ $badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
1031
+ $badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
1032
+ $badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
1033
+ $badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
1034
+ $badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;
926
1035
 
927
- //diagram Palette color
928
- --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt3);
929
- --color-sf-diagram-palette-hover-background: #ced4da;
1036
+ //breadcrumb
1037
+ $breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
1038
+ $breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
1039
+ $breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;
930
1040
 
931
- //rating
932
- --color-sf-rating-selected-color: var(--color-sf-primary);
933
- --color-sf-rating-unrated-color: var(--color-sf-content-bg-color-alt5);
934
- --color-sf-rating-selected-disabled-color: var(--color-sf-content-bg-color-alt4);
935
- --color-sf-rating-unrated-disabled-color: var(--color-sf-content-bg-color-alt3);
936
- --color-sf-rating-selected-hover-color: var(--color-sf-content-bg-color-alt5);
937
- --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
938
- --color-sf-rating-pressed-color: #599bfe;
1041
+ //tab
1042
+ $tab-alt-wrap-hover-color: mapcolorvariable('tab-alt-wrap-hover-color') !default;
939
1043
 
940
- //Message default
941
- --color-sf-msg-color: #ffffff;
942
- --color-sf-msg-bg-color: #3b4248;
943
- --color-sf-msg-border-color: #444c54;
944
- --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
945
- --color-sf-msg-bg-color-alt1: $transparent;
946
- --color-sf-msg-border-color-alt1: #9ca3af;
947
- --color-sf-msg-color-alt2: #ffffff;
948
- --color-sf-msg-bg-color-alt2: #444c54;
949
- --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
950
- --color-sf-msg-icon-color: var(--color-sf-content-text-color);
951
- --color-sf-msg-icon-color-alt1: var(--color-sf-content-text-color);
952
- --color-sf-msg-icon-color-alt2: #ffffff;
953
- --color-sf-msg-close-icon-color: var(--color-sf-icon-color);
954
- --color-sf-msg-close-icon-color-alt1: var(--color-sf-icon-color);
955
- --color-sf-msg-close-icon-color-alt2: #ffffff;
1044
+ //treeview
1045
+ $treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;
956
1046
 
957
- //Message danger
958
- --color-sf-msg-danger-color: #fae3e5;
959
- --color-sf-msg-danger-bg-color: #66121a;
960
- --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-bg-color);
961
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
962
- --color-sf-msg-danger-bg-color-alt1: $transparent;
963
- --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-color-alt1);
964
- --color-sf-msg-danger-color-alt2: #212529;
965
- --color-sf-msg-danger-bg-color-alt2: var(--color-sf-danger);
966
- --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
967
- --color-sf-msg-danger-icon-color: #fae3e5;
968
- --color-sf-msg-danger-icon-color-alt1: var(--color-sf-danger);
969
- --color-sf-msg-danger-icon-color-alt2: #212529;
970
- --color-sf-msg-danger-close-icon-color: var(--color-sf-icon-color);
971
- --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-icon-color);
972
- --color-sf-msg-danger-close-icon-color-alt2: #212529;
1047
+ //document editor
1048
+ $de-style-btn-bg-color: mapcolorvariable('de-style-btn-bg-color') !default;
1049
+ $de-toggle-border-color: mapcolorvariable('de-toggle-border-color') !default;
1050
+ $de-toggle-hover-color: mapcolorvariable('de-toggle-hover-color') !default;
1051
+ $de-toggle-border-hover-color: mapcolorvariable('de-toggle-border-hover-color') !default;
1052
+ $de-toggle-disabled-color: mapcolorvariable('de-toggle-disabled-color') !default;
1053
+ $connector-point-hover-color: mapcolorvariable('connector-point-hover-color') !default;
1054
+ $gantt-connected-task: mapcolorvariable('gantt-connected-task') !default;
1055
+ $gantt-active-parent-task: mapcolorvariable('gantt-active-parent-task') !default;
1056
+ $timepicker-active-border-color: mapcolorvariable('timepicker-active-border-color') !default;
1057
+ $hdr-selection-border-color: mapcolorvariable('hdr-selection-border-color') !default;
973
1058
 
974
- //Message success
975
- --color-sf-msg-success-color: #2ed889;
976
- --color-sf-msg-success-bg-color: #09311e;
977
- --color-sf-msg-success-border-color: #0b3a24;
978
- --color-sf-msg-success-color-alt1: #21b26f;
979
- --color-sf-msg-success-bg-color-alt1: $transparent;
980
- --color-sf-msg-success-border-color-alt1: #21b26f;
981
- --color-sf-msg-success-color-alt2: #212529;
982
- --color-sf-msg-success-bg-color-alt2: #21b26f;
983
- --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
984
- --color-sf-msg-success-icon-color: #2ed889;
985
- --color-sf-msg-success-icon-color-alt1: #21b26f;
986
- --color-sf-msg-success-icon-color-alt2: #212529;
987
- --color-sf-msg-success-close-icon-color: var(--color-sf-icon-color);
988
- --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-icon-color);
989
- --color-sf-msg-success-close-icon-color-alt2: #212529;
1059
+ $primary-dark: mapcolorvariable('primary-dark') !default;
1060
+ $primary-darker: mapcolorvariable('primary-darker') !default;
1061
+ $flyout-text-color-disabled: mapcolorvariable('flyout-text-color-disabled') !default;
1062
+ $close-icon-color: mapcolorvariable('close-icon-color') !default;
1063
+ $close-icon-color-hover: mapcolorvariable('close-icon-color-hover') !default;
1064
+ $close-icon-color-pressed: mapcolorvariable('close-icon-color-pressed') !default;
1065
+ $close-icon-color-disabled: mapcolorvariable('close-icon-color-disabled') !default;
990
1066
 
991
- //Message warning
992
- --color-sf-msg-warning-color: #ffeeb9;
993
- --color-sf-msg-warning-bg-color: #866500;
994
- --color-sf-msg-warning-border-color: #967000;
995
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
996
- --color-sf-msg-warning-bg-color-alt1: $transparent;
997
- --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-color-alt1);
998
- --color-sf-msg-warning-color-alt2: #212529;
999
- --color-sf-msg-warning-bg-color-alt2: var(--color-sf-warning);
1000
- --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
1001
- --color-sf-msg-warning-icon-color: var(--color-sf-warning);
1002
- --color-sf-msg-warning-icon-color-alt1: var(--color-sf-warning);
1003
- --color-sf-msg-warning-icon-color-alt2: #212529;
1004
- --color-sf-msg-warning-close-icon-color: var(--color-sf-icon-color);
1005
- --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-icon-color);
1006
- --color-sf-msg-warning-close-icon-color-alt2: #212529;
1067
+ //badge
1068
+ $badge-light-bg-color: mapcolorvariable('badge-light-bg-color') !default;
1069
+ $badge-light-border-color: mapcolorvariable('badge-light-border-color') !default;
1070
+ $badge-light-text-color: mapcolorvariable('badge-light-text-color') !default;
1071
+ $badge-dark-bg-color: mapcolorvariable('badge-dark-bg-color') !default;
1072
+ $badge-dark-border-color: mapcolorvariable('badge-dark-border-color') !default;
1073
+ $badge-dark-text-color: mapcolorvariable('badge-dark-text-color') !default;
1074
+
1075
+ $tab-border: mapcolorvariable('tab-border') !default;
1076
+ $stepper: mapcolorvariable('stepper') !default;
1077
+
1078
+ $primary-shadow: mapcolorvariable('primary-shadow') !default;
1079
+ $secondary-shadow: mapcolorvariable('secondary-shadow') !default;
1080
+ $success-shadow: mapcolorvariable('success-shadow') !default;
1081
+ $danger-shadow: mapcolorvariable('danger-shadow') !default;
1082
+ $info-shadow: mapcolorvariable('info-shadow') !default;
1083
+ $warning-shadow: mapcolorvariable('warning-shadow') !default;
1084
+
1085
+ $shadow-color: mapcolorvariable('shadow-color') !default;
1086
+ $shadow-color1: mapcolorvariable('shadow-color1') !default;
1007
1087
 
1008
- //Message info
1009
- --color-sf-msg-info-color: #84e5f8;
1010
- --color-sf-msg-info-bg-color: #05505f;
1011
- --color-sf-msg-info-border-color: #065c6d;
1012
- --color-sf-msg-info-color-alt1: var(--color-sf-info);
1013
- --color-sf-msg-info-bg-color-alt1: $transparent;
1014
- --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-color-alt1);
1015
- --color-sf-msg-info-color-alt2: #212529;
1016
- --color-sf-msg-info-bg-color-alt2: var(--color-sf-info);
1017
- --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
1018
- --color-sf-msg-info-icon-color: var(--color-sf-info);
1019
- --color-sf-msg-info-icon-color-alt1: var(--color-sf-info);
1020
- --color-sf-msg-info-icon-color-alt2: #212529;
1021
- --color-sf-msg-info-close-icon-color: var(--color-sf-icon-color);
1022
- --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-icon-color);
1023
- --color-sf-msg-info-close-icon-color-alt2: #212529;
1024
- }
1088
+ // black
1089
+ $black: mapcolorvariable('black') !default;
1090
+
1091
+ // White
1092
+ $white: mapcolorvariable('white') !default;
1025
1093
 
1026
1094
  // Transparent
1027
1095
  $transparent: transparent;
@@ -1088,7 +1156,7 @@ $flyout-bg-color: $flyout-bg-color !default;
1088
1156
  $flyout-bg-color-hover: $flyout-bg-color-hover !default;
1089
1157
  $flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
1090
1158
  $flyout-bg-color-focus: $flyout-bg-color-focus !default;
1091
- $overlay-bg-color: $overlay-bg-color !default;
1159
+ $overlay-bg-color: rgba($overlay-bg, .5) !default;
1092
1160
  $table-bg-color-hover: $table-bg-color-hover !default;
1093
1161
  $table-bg-color-pressed: $table-bg-color-pressed !default;
1094
1162
  $table-bg-color-selected: $table-bg-color-selected !default;
@@ -1134,6 +1202,12 @@ $icon-color-hover: $icon-color-hover !default;
1134
1202
  $icon-color-pressed: $icon-color-pressed !default;
1135
1203
  $icon-color-disabled: $icon-color-disabled !default;
1136
1204
 
1205
+ // close-icon-color
1206
+ $close-icon-color: $close-icon-color !default;
1207
+ $close-icon-color-hover: $close-icon-color-hover !default;
1208
+ $close-icon-color-pressed: $close-icon-color-pressed !default;
1209
+ $close-icon-color-disabled: $close-icon-color-disabled !default;
1210
+
1137
1211
  // border-color
1138
1212
  $border-light: $border-light !default;
1139
1213
  $border: $border !default;
@@ -1153,7 +1227,7 @@ $flyout-border: $flyout-border !default;
1153
1227
  // Tooltip
1154
1228
  $tooltip-bg-color: $tooltip-bg-color !default;
1155
1229
  $tooltip-border: $tooltip-border !default;
1156
- $toooltip-text-color: $tooltip-text-color !default;
1230
+ $tooltip-text-color: $tooltip-text-color !default;
1157
1231
 
1158
1232
  // shadow
1159
1233
  $shadow: 0 .8px 16px rgba($black, .15) !default;
@@ -1164,14 +1238,15 @@ $shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04
1164
1238
  $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
1165
1239
  $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
1166
1240
  $shadow-none: 0 0 rgba($black, 0) !default;
1167
- $shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
1168
- $shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
1169
- $primary-shadow-focus: 0 0 0 4px rgba($primary, .5) !default;
1170
- $secondary-shadow-focus: 0 0 0 4px rgba($secondary, .5) !default;
1171
- $success-shadow-focus: 0 0 0 4px rgba($success, .5) !default;
1172
- $danger-shadow-focus: 0 0 0 4px rgba($danger, .5) !default;
1173
- $info-shadow-focus: 0 0 0 4px rgba($info, .5) !default;
1174
- $warning-shadow-focus: 0 0 0 4px rgba($warning, .5) !default;
1241
+ $shadow-focus-ring1: 0 0 0 4px rgba($primary-shadow, .25) !default;
1242
+ $shadow-focus-ring2: 0 0 0 4px rgba($primary-shadow, .25) !default;
1243
+ $primary-shadow-focus: 0 0 0 4px rgba($primary-shadow, .5) !default;
1244
+ $secondary-shadow-focus: 0 0 0 4px rgba($secondary-shadow, .5) !default;
1245
+ $success-shadow-focus: 0 0 0 4px rgba($success-shadow, .5) !default;
1246
+ $danger-shadow-focus: 0 0 0 4px rgba($danger-shadow, .5) !default;
1247
+ $info-shadow-focus: 0 0 0 4px rgba($info-shadow, .5) !default;
1248
+ $warning-shadow-focus: 0 0 0 4px rgba($warning-shadow, .5) !default;
1249
+ $keyboard-focus-shadow: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $shadow-color1 !default;
1175
1250
 
1176
1251
  // fontfamily
1177
1252
  $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;
@@ -1238,7 +1313,7 @@ $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
1238
1313
 
1239
1314
  // Primary-button
1240
1315
 
1241
- $primary-bg-color: $primary-bg-color !default;
1316
+ $primary-bg-color: rgba($primary-bg-color, 1) !default;
1242
1317
  $primary-border-color: $primary-border-color !default;
1243
1318
  $primary-text: $primary-text !default;
1244
1319
  $primary-bg-color-hover: $primary-bg-color-hover !default;
@@ -1255,7 +1330,7 @@ $primary-border-color-disabled: $primary-border-color-disabled !default;
1255
1330
  $primary-text-disabled: $primary-text-disabled !default;
1256
1331
 
1257
1332
  // Success-button
1258
- $success-bg-color: $success-bg-color !default;
1333
+ $success-bg-color: rgba($success-bg-color, 1) !default;
1259
1334
  $success-border-color: $success-border-color !default;
1260
1335
  $success-text: $success-text !default;
1261
1336
  $success-bg-color-hover: $success-bg-color-hover !default;
@@ -1272,7 +1347,7 @@ $success-border-color-disabled: $success-border-color-disabled !default;
1272
1347
  $success-text-disabled: $success-text-disabled !default;
1273
1348
 
1274
1349
  // Warning-button
1275
- $warning-bg-color: $warning-bg-color !default;
1350
+ $warning-bg-color: rgba($warning-bg-color, 1) !default;
1276
1351
  $warning-border-color: $warning-border-color !default;
1277
1352
  $warning-text: $warning-text !default;
1278
1353
  $warning-bg-color-hover: $warning-bg-color-hover !default;
@@ -1289,7 +1364,7 @@ $warning-border-color-disabled: $warning-border-color-disabled !default;
1289
1364
  $warning-text-disabled: $warning-text-disabled !default;
1290
1365
 
1291
1366
  // Info-button
1292
- $info-bg-color: $info-bg-color !default;
1367
+ $info-bg-color: rgba($info-bg-color, 1) !default;
1293
1368
  $info-border-color: $info-border-color !default;
1294
1369
  $info-text: $info-text !default;
1295
1370
  $info-bg-color-hover: $info-bg-color-hover !default;
@@ -1306,7 +1381,7 @@ $info-border-color-disabled: $info-border-color-disabled !default;
1306
1381
  $info-text-disabled: $info-text-disabled !default;
1307
1382
 
1308
1383
  // danger-button
1309
- $danger-bg-color: $danger-bg-color !default;
1384
+ $danger-bg-color: rgba($danger-bg-color, 1) !default;
1310
1385
  $danger-border-color: $danger-border-color !default;
1311
1386
  $danger-text: $danger-text !default;
1312
1387
  $danger-bg-color-hover: $danger-bg-color-hover !default;
@@ -1343,8 +1418,8 @@ $series-9: #52236c;
1343
1418
  $series-10: #3a6b6f;
1344
1419
  $series-11: #d64f56;
1345
1420
  $series-12: #f3a93c;
1346
- $skin-name: 'bootstrap5' !default;
1347
- $theme-name: 'bootstrap5' !default;
1421
+ $skin-name: 'bootstrap5.3' !default;
1422
+ $theme-name: 'bootstrap5.3' !default;
1348
1423
 
1349
1424
  //diagram Palette color
1350
1425
  $diagram-palette-background: $diagram-palette-background !default;
@@ -1458,7 +1533,7 @@ $appbar-bottom-shadow: none !default;
1458
1533
  $appbar-top-shadow: none !default;
1459
1534
 
1460
1535
  //rating
1461
- $rating-selected-color: $diagram-palette-background !default;
1536
+ $rating-selected-color: $rating-selected-color !default;
1462
1537
  $rating-unrated-color: $rating-unrated-color !default;
1463
1538
  $rating-selected-disabled-color: $rating-selected-disabled-color !default;
1464
1539
  $rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
@@ -1483,4 +1558,15 @@ $font-icon-24: 24px !default;
1483
1558
  $font-icon-26: 26px !default;
1484
1559
  $font-icon-28: 28px !default;
1485
1560
  $font-icon-32: 32px !default;
1486
- $accordion-text-active-color: ($primary, 10%) !default;
1561
+ $accordion-text-active-color: $primary-darker !default;
1562
+
1563
+ //badge
1564
+ $badge-light-bg-color: $badge-light-bg-color;
1565
+ $badge-light-border-color: $badge-light-border-color;
1566
+ $badge-light-text-color: $badge-light-text-color;
1567
+ $badge-dark-bg-color: $badge-dark-bg-color;
1568
+ $badge-dark-border-color: $badge-dark-border-color;
1569
+ $badge-dark-text-color: $badge-dark-text-color;
1570
+
1571
+ $tab-border: $tab-border;
1572
+ $stepper:$stepper;