Skip to content

Commit dc5d402

Browse files
ghiscodingghiscoding
committed
fix(styling): add missing Dark Mode SASS vars to configure primary color
1 parent 84c0239 commit dc5d402

File tree

6 files changed

+49
-24
lines changed

6 files changed

+49
-24
lines changed

‎examples/vite-demo-vanilla-bundle/src/examples/example18.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ $sparkline-color: #00b78d;
5252

5353
.slick-dark-mode,
5454
.dark-mode {
55+
.text-color-success {
56+
color: #42b47f !important
57+
}
5558
.changed-gain {
5659
background-color: #00ff001d !important;
5760
}

‎examples/vite-demo-vanilla-bundle/src/examples/example18.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => {
2525
const direction = dataContext.priceChange >= 0 ? 'up' : 'down';
2626
const fragment = new DocumentFragment();
2727
const divElm = document.createElement('div');
28-
divElm.className = 'd-inline-flex align-items-center';
28+
divElm.className = `d-inline-flex align-items-center text-color-${direction === 'up' ? 'success' : 'danger'}`;
2929
const spanElm = document.createElement('span');
30-
spanElm.className = `mdi mdi-arrow-${direction} text-color-${direction === 'up' ? 'success' : 'danger'}`;
30+
spanElm.className = `mdi mdi-arrow-${direction}`;
3131
divElm.appendChild(spanElm);
3232
fragment.appendChild(divElm);
3333
if (value instanceof HTMLElement) {
3434
divElm.appendChild(value);
35+
} else {
36+
divElm.appendChild(document.createTextNode(value));
3537
}
3638
return fragment;
3739
};
@@ -143,7 +145,7 @@ export default class Example18 {
143145
filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
144146
formatter: Formatters.multiple,
145147
params: {
146-
formatters: [Formatters.dollarColored, priceFormatter],
148+
formatters: [Formatters.dollar, priceFormatter],
147149
maxDecimal: 2,
148150
}
149151
},

‎packages/common/src/styles/_variables-theme-material.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,16 @@ $slick-pagination-page-input-border-radius: 3px !default;
8888

8989
// Dark Mode
9090
// -----------
91+
$slick-dark-primary-color: #66bb6a;
92+
$slick-dark-base-dark-menu-bg-color: #212121;
93+
$slick-dark-highlight-color: $slick-dark-primary-color;
94+
$slick-dark-text-color: #d4d4d4;
95+
9196
.ms-dark-mode,
9297
.ms-drop.ms-dark-mode,
9398
.slick-dark-mode .ms-dark-mode,
9499
.slick-dark-mode .icon-checkbox-container,
95100
.slick-dark-mode {
96-
--slick-primary-color: #66bb6a;
97101
--slick-base-dark-menu-bg-color: #212121;
98102
--slick-button-primary-bg-color: #66bb6a;
99103
--slick-cell-box-shadow: none;

‎packages/common/src/styles/_variables-theme-salesforce.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,14 @@ $slick-pagination-page-input-border-radius: 3px !default;
124124

125125
// Dark Mode
126126
// -----------
127+
$slick-dark-primary-color: #66b8ff;
128+
$slick-dark-base-dark-menu-bg-color: #212121;
129+
127130
.ms-dark-mode,
128131
.ms-drop.ms-dark-mode,
129132
.slick-dark-mode .ms-dark-mode,
130133
.slick-dark-mode .icon-checkbox-container,
131134
.slick-dark-mode {
132-
--slick-primary-color: #66b8ff;
133135
--ms-checkbox-color: #66b8ff;
134136
--ms-ok-button-text-color: #66b8ff;
135137
--slick-button-primary-bg-color: #0064c9;
@@ -138,7 +140,6 @@ $slick-pagination-page-input-border-radius: 3px !default;
138140
--slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
139141
--slick-cell-box-shadow: 0px 1px 0px #303030, 0px -1px 0px #303030;
140142
--slick-checkbox-icon-container-bg-color: #2d2d2d;
141-
--slick-highlight-color: #3ca4ff;
142143
--slick-column-picker-icon-color: #66b8ff;
143144
--slick-checkbox-icon-color: #66b8ff;
144145
--slick-checkbox-icon-border: 1px solid #5e5e5e;

‎packages/common/src/styles/_variables.scss

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -558,7 +558,7 @@ $slick-editor-modal-footer-padding: 8px !default;
558558
$slick-editor-modal-footer-status-text-width: 40% !default;
559559
$slick-editor-modal-footer-buttons-width: 60% !default;
560560
$slick-editor-modal-footer-btn-border: 1px solid #dbdbdb !default;
561-
$slick-editor-modal-footer-btn-border-hover: #b5b5b5 !default;
561+
$slick-editor-modal-footer-btn-border-hover-color: #b5b5b5 !default;
562562
$slick-editor-modal-footer-btn-height: inherit !default;
563563
$slick-editor-modal-footer-btn-margin: 0 5px 0 0 !default;
564564
$slick-editor-modal-footer-btn-radius: 4px !default;
@@ -940,30 +940,42 @@ $slick-empty-data-warning-z-index: 10 !default;
940940

941941
// Dark Mode
942942
// -----------
943+
944+
// add a few Dark Mode SASS variables, just the basic vars
945+
$slick-dark-primary-color: lighten($primary-color, 15%);
946+
$slick-dark-base-dark-text-color: #d4d4d4;
947+
$slick-dark-base-dark-menu-bg-color: #252525;
948+
$slick-dark-base-dark-menu-border-color: #505050;
949+
$slick-dark-base-dark-menu-item-border-color: #5a5a5a;
950+
$slick-dark-base-dark-menu-item-hover-color: #363b40;
951+
$slick-dark-base-dark-invalid-color: #ea868f;
952+
$slick-dark-highlight-color: $slick-dark-primary-color;
953+
$slick-dark-text-color: #d4d4d4;
954+
943955
.ms-dark-mode,
944956
.ms-drop.ms-dark-mode,
945957
.slick-dark-mode .ms-dark-mode,
946958
.slick-dark-mode {
947-
// Bootstrap --bs-body-bg: #212529
948959
// local common CSS vars for dark mode
949-
--slick-primary-color: #{lighten($primary-color, 15%)};
950-
--slick-base-dark-text-color: #d4d4d4;
951-
--slick-base-dark-menu-bg-color: #252525;
952-
--slick-base-dark-menu-border: 1px solid #505050;
953-
--slick-base-dark-menu-item-border: 1px solid #5a5a5a;
954-
--slick-base-dark-menu-item-hover-color: #363b40;
955-
--slick-base-dark-invalid-color: #ea868f;
956-
--slick-highlight-color: var(--slick-primary-color);
957-
--slick-text-color: #d4d4d4;
960+
--slick-primary-color: #{$slick-dark-primary-color};
961+
--slick-base-dark-text-color: #{$slick-dark-base-dark-text-color};
962+
--slick-base-dark-menu-bg-color: #{$slick-dark-base-dark-menu-bg-color};
963+
--slick-base-dark-menu-border: 1px solid #{$slick-dark-base-dark-menu-border-color};
964+
--slick-base-dark-menu-item-border: 1px solid #{$slick-dark-base-dark-menu-item-border-color};
965+
--slick-base-dark-menu-item-hover-color: #{$slick-dark-base-dark-menu-item-hover-color};
966+
--slick-base-dark-invalid-color: #{$slick-dark-base-dark-invalid-color};
967+
--slick-highlight-color: #{$slick-dark-highlight-color};
968+
--slick-text-color: #{$slick-dark-text-color};
958969

970+
// Bootstrap body bg-color is "--bs-body-bg: #212529"
959971
--slick-autocomplete-bg-color: var(--slick-base-dark-menu-bg-color);
960972
--slick-autocomplete-hover-bg-color: #2c3034;
961973
--slick-autocomplete-text-color: #cdcdcd;
962974
--slick-autocomplete-tpl4-bottom-right-text-color: var(--slick-base-dark-text-color);
963975
--slick-autocomplete-tpl4-bottom-left-text-color: var(--slick-base-dark-text-color);
964976
--slick-autocomplete-tpl4-top-left-text-color: #fafafa;
965977
--slick-button-border-color: #626262;
966-
--slick-button-hover-border-color: #929292;
978+
--slick-button-hover-border-color: #808080;
967979
--slick-button-primary-color: #bababa;
968980
--slick-button-style-bg-color: var(--slick-base-dark-menu-bg-color);
969981
--slick-btn-default-bg-color: #383838;
@@ -983,8 +995,8 @@ $slick-empty-data-warning-z-index: 10 !default;
983995
--slick-column-picker-item-hover-color: var(--slick-base-dark-menu-item-hover-color);
984996
--slick-column-picker-title-border-bottom: 1px solid #525252;
985997
--slick-checkbox-opacity-hover: 0.7;
998+
--slick-checkbox-icon-color: var(--slick-primary-color);
986999
--slick-checkbox-icon-bg-color: #444444;
987-
--slick-checkbox-icon-bg-color: transparent;
9881000
--slick-checkbox-unchecked-color: #{lighten($primary-color, 10%)};
9891001
--slick-checkbox-unchecked-opacity: 0.4;
9901002
--slick-detail-view-icon-color: var(--slick-primary-color);
@@ -1027,7 +1039,7 @@ $slick-empty-data-warning-z-index: 10 !default;
10271039
--slick-input-group-addon-color: var(--slick-base-dark-text-color);
10281040
--slick-input-group-addon-bg-color: #383a3c;
10291041
--slick-input-group-addon-border: var(--slick-base-dark-menu-item-border);
1030-
--slick-input-group-btn-bg-color: #383838;
1042+
--slick-input-group-btn-bg-color: #454545;
10311043
--slick-input-group-btn-hover-bg-color: #3e3e3e;
10321044
--slick-input-group-btn-border: var(--slick-base-dark-menu-item-border);
10331045
--slick-input-group-append-bg-color: #383838;
@@ -1059,6 +1071,7 @@ $slick-empty-data-warning-z-index: 10 !default;
10591071
--slick-editor-modal-default-btn-disabled-color: #5b5b5b;
10601072
--slick-editor-modal-detail-container-border-modified: 1px solid #cc8400;
10611073
--slick-editor-modal-close-btn-border-left: var(--slick-base-dark-menu-border);
1074+
--slick-editor-modal-footer-btn-border-hover-color: var(--slick-button-hover-border-color);
10621075
--slick-editor-modal-container-bg-color: #333333;
10631076
--slick-editor-modal-header-bg-color: #333333;
10641077
--slick-editor-modal-footer-bg-color: #333333;
@@ -1092,6 +1105,7 @@ $slick-empty-data-warning-z-index: 10 !default;
10921105
--slick-pagination-button-border-disabled-color: #565656;
10931106
--slick-pagination-button-bg-color: #1e1e1e;
10941107
--slick-pagination-button-hover-color: #2b2b2b;
1108+
--slick-pagination-icon-color: var(--slick-primary-color);
10951109
--slick-pagination-icon-seek-background-color: #434343;
10961110
--slick-pagination-icon-seek-disabled-bg-color: #434343;
10971111
--slick-pagination-icon-seek-disabled-color: gray;
@@ -1104,9 +1118,10 @@ $slick-empty-data-warning-z-index: 10 !default;
11041118
--slick-container-border-top: var(--slick-base-dark-menu-border);
11051119
--slick-container-border-bottom: var(--slick-base-dark-menu-border);
11061120
--slick-canvas-bg-color: #141618;
1121+
--slick-multiselect-checkbox-hover-bg-color: $slick-dark-base-dark-menu-bg-color;
11071122
--slick-multiselect-input-filter-border: 1px solid #949494;
11081123
--slick-multiselect-option-highlight-bg-color: var(--slick-base-dark-menu-item-hover-color);
1109-
--slick-multiselect-select-all-label-hover-bg-color: var(--ms-option-highlight-bg-color);
1124+
--slick-multiselect-select-all-label-hover-bg-color: var(--slick-base-dark-menu-item-hover-color);
11101125
--slick-multiselect-option-highlight-border: var(--slick-base-dark-menu-item-border);
11111126
--slick-submenu-box-shadow: 0 1px 3px 1px rgba(146, 152, 163, 0.4)
11121127

@@ -1115,7 +1130,7 @@ $slick-empty-data-warning-z-index: 10 !default;
11151130
--ms-drop-background: var(--slick-base-dark-menu-bg-color);
11161131
--ms-drop-color: #bbbbbb;
11171132
--ms-drop-hide-radio-hover-bgcolor: var(--slick-base-dark-menu-item-hover-color);
1118-
--ms-option-highlight-bg-color: var(--slick-base-dark-menu-item-hover-color);
1133+
--ms-option-highlight-bg-color: var(--slick-multiselect-select-all-label-hover-bg-color);
11191134
--ms-ok-button-bg-color: #262626;
11201135
--ms-ok-button-bg-hover-color: #373c42;
11211136
--ms-placeholder-color: #999;

‎packages/common/src/styles/slick-editors.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
cursor: pointer;
9999
height: var(--slick-date-editor-height, $slick-date-editor-height);
100100
&:hover:not([disabled]) {
101-
background-color: var(--slick-input-group-btn-hover-bg-color, $slick-input-group-btn-hover-bg-color); // 1px solid #6c757d;
101+
background-color: var(--slick-input-group-btn-hover-bg-color, $slick-input-group-btn-hover-bg-color);
102102
}
103103
.icon-clear {
104104
display: flex;
@@ -226,7 +226,7 @@
226226
border: var(--slick-editor-modal-footer-btn-border, $slick-editor-modal-footer-btn-border);
227227
border-radius: var(--slick-editor-modal-footer-btn-radius, $slick-editor-modal-footer-btn-radius);
228228
&:hover {
229-
border-color: var(--slick-editor-modal-footer-btn-border-hover, $slick-editor-modal-footer-btn-border-hover);
229+
border-color: var(--slick-editor-modal-footer-btn-border-hover-color, $slick-editor-modal-footer-btn-border-hover-color);
230230
&.btn-default {
231231
color: var(--slick-editor-modal-footer-btn-text-color-hover, $slick-editor-modal-footer-btn-text-color-hover);
232232
}

0 commit comments

Comments
 (0)