fix: Material Theme primary color should be reassigned & forwarded

ghiscoding · Nov 9, 2024 · b3f4a23 · b3f4a23
1 parent e4da507
commit b3f4a23
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -7,17 +7,18 @@
 @use 'sass:color';
 
 $slick-highlight-color:                                       #48c774;
-$slick-primary-color:                                         #009530;
-$slick-filled-filter-border:                                  1px solid #{$slick-primary-color} !default;
+$primary-color:                                               #009530;
+$slick-filled-filter-border:                                  1px solid #{$primary-color} !default;
 $slick-editor-input-group-clear-btn-icon-color:               inherit !default;
 
 @forward './variables' with (
+  $slick-primary-color:                                       $primary-color !default,
   $slick-highlight-color:                                     #48c774 !default,
   $slick-font-family:                                         #{"Roboto", "Helvetica Neue", "Sans-Serif"} !default,
   $slick-font-size-base-value:                                14 !default,
   $slick-icon-color:                                          inherit !default,
   $slick-icon-font-size:                                      18px !default,
-  $slick-input-focus-border-color:                              color.adjust($slick-primary-color, $lightness: 12%) !default,
+  $slick-input-focus-border-color:                              color.adjust($primary-color, $lightness: 12%) !default,
   $slick-group-totals-formatter-color:                        #666666 !default,
   $slick-cell-border-top:                                     none !default,
   $slick-cell-font-weight:                                    400 !default,
@@ -46,8 +47,8 @@ $slick-editor-input-group-clear-btn-icon-color:               inherit !default;
   $slick-container-border-bottom:                             1px solid #ccc !default,
   $slick-container-border-left:                               1px solid #ccc !default,
   $slick-container-border-right:                              1px solid #ccc !default,
-  $slick-icon-sort-color:                                     $slick-primary-color !default,
-  $slick-checkbox-icon-color:                                 $slick-primary-color !default,
+  $slick-icon-sort-color:                                     $primary-color !default,
+  $slick-checkbox-icon-color:                                 $primary-color !default,
   $slick-checkbox-icon-container-bg-color:                    transparent !default,
   $slick-checkbox-icon-checked-svg-path:                      "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" !default,
   $slick-checkbox-icon-unchecked-svg-path:                    "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" !default,
@@ -63,7 +64,7 @@ $slick-editor-input-group-clear-btn-icon-color:               inherit !default;
   $slick-menu-icon-line-height:                               18px !default,
   $slick-menu-icon-min-width:                                 18px !default,
   $slick-menu-title-font-size:                                17px !default,
-  $slick-icon-group-color:                                    $slick-primary-color !default,
+  $slick-icon-group-color:                                    $primary-color !default,
   $slick-draggable-group-drop-border-top:                     0px !default,
   $slick-draggable-group-drop-border-left:                    0px !default,
   $slick-draggable-group-drop-border-right:                   0px !default,
@@ -79,17 +80,17 @@ $slick-editor-input-group-clear-btn-icon-color:               inherit !default;
   $slick-header-button-margin:                                -4px 0 100px 0 !default,
   $slick-header-menu-button-icon-color:                       inherit !default,
   $slick-header-menu-display:                                 inline-block !default,
-  $slick-form-control-focus-box-shadow:                       0 0 0 2.5px rgba($slick-primary-color, 0.25) !default,
-  $slick-compound-filter-operator-select-border:              1px solid #{color.adjust($slick-primary-color, $lightness: 10%)} !default,
-  $slick-compound-filter-text-color:                          color.adjust($slick-primary-color, $lightness: -20%) !default,
+  $slick-form-control-focus-box-shadow:                       0 0 0 2.5px rgba($primary-color, 0.25) !default,
+  $slick-compound-filter-operator-select-border:              1px solid #{color.adjust($primary-color, $lightness: 10%)} !default,
+  $slick-compound-filter-text-color:                          color.adjust($primary-color, $lightness: -20%) !default,
   $slick-preheader-border-right:                              1px solid #e2e2e2 !default,
   $slick-row-move-plugin-cursor:                              grab !default,
   $slick-row-move-plugin-icon-color:                          inherit !default,
   $slick-editor-input-height:                                 100% !default,
   $slick-editor-input-group-clear-btn-icon-padding:           1px 6px !default,
   $slick-row-mouse-hover-color:                               #ebfaef !default,
   $slick-row-selected-color:                                  #d4f6d7 !default,
-  $slick-pagination-icon-color:                               $slick-primary-color !default,
+  $slick-pagination-icon-color:                               $primary-color !default,
   $slick-pagination-button-border-radius:                     2px !default,
   $slick-pagination-page-input-border-radius:                 3px !default,
 );