Fix CSS variable handling in lessToSass conversion (#3611)

vufind-org · Apr 23, 2024 · f78abfc · f78abfc
1 parent 511f059
commit f78abfc
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 130 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -169,10 +169,15 @@ module.exports = function(grunt) {
               },
               order: 4
             },
+            { // Wrap variables set to css variables with #{}
+              pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
+              replacement: '$1#{$2}',
+              order: 5
+            },
             { // Remove !default from extends (icons.scss)
               pattern: /@extend ([^;}]+) !default;/gi,
               replacement: '@extend $1;',
-              order: 5
+              order: 6
             }
           ]
         }

diff --git a/themes/bootstrap3/less/components/cookie-consent/abstracts/light-color-scheme.less b/themes/bootstrap3/less/components/cookie-consent/abstracts/light-color-scheme.less
@@ -1,6 +1,5 @@
 /** Light color-scheme **/
 :root{
-/* #LESS> */
     --cc-bg: @modal-content-bg;
     --cc-primary-color: @text-color;
     --cc-secondary-color: lighten(@text-color, 10%);
@@ -49,55 +48,4 @@
     --cc-footer-bg: @panel-footer-bg;
     --cc-footer-color: @text-color;
     --cc-footer-border-color: @panel-default-border;
-/* <#LESS */
-/* #SCSS>
-    --cc-bg: #{$modal-content-bg};
-    --cc-primary-color: #{$text-color};
-    --cc-secondary-color: #{lighten($text-color, 10%)};
-
-    --cc-btn-primary-bg: #{$btn-primary-bg};
-    --cc-btn-primary-color: #{$btn-primary-color};
-    --cc-btn-primary-border-color: #{$btn-primary-bg};
-    --cc-btn-primary-hover-bg: #{$btn-primary-color};
-    --cc-btn-primary-hover-color: #{$btn-primary-bg};
-    --cc-btn-primary-hover-border-color: #{darken($btn-primary-border, 12%)};
-
-    --cc-btn-secondary-bg: #{$btn-default-bg};
-    --cc-btn-secondary-color: #{$btn-default-color};
-    --cc-btn-secondary-border-color: #{$btn-default-border};
-    --cc-btn-secondary-hover-bg: #{$btn-default-color};
-    --cc-btn-secondary-hover-color: #{$btn-default-bg};
-    --cc-btn-secondary-hover-border-color: #{darken($btn-default-border, 12%)};
-
-    --cc-separator-border-color: #{$well-border};
-
-    --cc-toggle-on-bg: #{$gray-light};
-    --cc-toggle-off-bg: #{lighten($gray-light, 10%)};
-    --cc-toggle-on-knob-bg: #{$body-bg};
-    --cc-toggle-off-knob-bg: #{$body-bg};
-
-    --cc-toggle-enabled-icon-color: #{$modal-content-bg};   // yes (v tick)
-    --cc-toggle-disabled-icon-color: #{$modal-content-bg};  // no (x tick)
-
-    --cc-toggle-readonly-bg: #{lighten($gray-light, 20%)};
-    --cc-toggle-readonly-knob-bg: #{$body-bg};
-    --cc-toggle-readonly-knob-icon-color: lighten($gray-light, 20%);
-
-    --cc-section-category-border: #{$gray-lighter};
-
-    --cc-cookie-category-block-bg: #{$gray-lighter};
-    --cc-cookie-category-block-border: #{$list-group-border};
-    --cc-cookie-category-block-hover-bg: #{darken($gray-lighter, 10%)};
-    --cc-cookie-category-block-hover-border: #{$list-group-border};
-    --cc-cookie-category-expanded-block-bg: #{$gray-lighter};
-    --cc-cookie-category-expanded-block-hover-bg: darken($gray-lighter, 10%);
-
-    --cc-overlay-bg: #{$modal-backdrop-bg};
-    --cc-webkit-scrollbar-bg: #{$gray-lighter};
-    --cc-webkit-scrollbar-hover-bg: #{$btn-primary-color};
-
-    --cc-footer-bg: #{$panel-footer-bg};
-    --cc-footer-color: #{$text-color};
-    --cc-footer-border-color: #{$panel-default-border};
-<#SCSS */
 }
diff --git a/themes/bootstrap3/less/components/cookie-consent/core/base.less b/themes/bootstrap3/less/components/cookie-consent/core/base.less
@@ -5,24 +5,13 @@
  */
 
 :root{
-/* #LESS> */
     --cc-font-family: @font-family-base;
     --cc-modal-border-radius: @border-radius-base;
     --cc-btn-border-radius: @btn-border-radius-base;
     --cc-modal-transition-duration: .25s;
     --cc-link-color: @link-color;
     --cc-modal-margin: 1rem;
     --cc-z-index: @zindex-cookie-consent;
-/* <#LESS */
-/* #SCSS>
-    --cc-font-family: #{$font-family-base};
-    --cc-modal-border-radius: #{$border-radius-base};
-    --cc-btn-border-radius: #{$btn-border-radius-base};
-    --cc-modal-transition-duration: .25s;
-    --cc-link-color: #{$link-color};
-    --cc-modal-margin: 1rem;
-    --cc-z-index: #{$zindex-cookie-consent};
-<#SCSS */
 }
 
 #cc-main {

diff --git a/themes/bootstrap3/scss/components/cookie-consent/abstracts/light-color-scheme.scss b/themes/bootstrap3/scss/components/cookie-consent/abstracts/light-color-scheme.scss
@@ -1,56 +1,5 @@
 /** Light color-scheme **/
 :root{
-/* #LESS>
-    --cc-bg: $modal-content-bg;
-    --cc-primary-color: $text-color;
-    --cc-secondary-color: lighten($text-color, 10%);
-
-    --cc-btn-primary-bg: $btn-primary-bg;
-    --cc-btn-primary-color: $btn-primary-color;
-    --cc-btn-primary-border-color: $btn-primary-bg;
-    --cc-btn-primary-hover-bg: $btn-primary-color;
-    --cc-btn-primary-hover-color: $btn-primary-bg;
-    --cc-btn-primary-hover-border-color: darken($btn-primary-border, 12%);
-
-    --cc-btn-secondary-bg: $btn-default-bg;
-    --cc-btn-secondary-color: $btn-default-color;
-    --cc-btn-secondary-border-color: $btn-default-border;
-    --cc-btn-secondary-hover-bg: $btn-default-color;
-    --cc-btn-secondary-hover-color: $btn-default-bg;
-    --cc-btn-secondary-hover-border-color: darken($btn-default-border, 12%);
-
-    --cc-separator-border-color: $well-border;
-
-    --cc-toggle-on-bg: $gray-light;
-    --cc-toggle-off-bg: lighten($gray-light, 10%);
-    --cc-toggle-on-knob-bg: $body-bg;
-    --cc-toggle-off-knob-bg: $body-bg;
-
-    --cc-toggle-enabled-icon-color: $modal-content-bg;   // yes (v tick)
-    --cc-toggle-disabled-icon-color: $modal-content-bg;  // no (x tick)
-
-    --cc-toggle-readonly-bg: lighten($gray-light, 20%);
-    --cc-toggle-readonly-knob-bg: $body-bg;
-    --cc-toggle-readonly-knob-icon-color: lighten($gray-light, 20%);
-
-    --cc-section-category-border: $gray-lighter;
-
-    --cc-cookie-category-block-bg: $gray-lighter;
-    --cc-cookie-category-block-border: $list-group-border;
-    --cc-cookie-category-block-hover-bg: darken($gray-lighter, 10%);
-    --cc-cookie-category-block-hover-border: $list-group-border;
-    --cc-cookie-category-expanded-block-bg: $gray-lighter;
-    --cc-cookie-category-expanded-block-hover-bg: darken($gray-lighter, 10%);
-
-    --cc-overlay-bg: $modal-backdrop-bg;
-    --cc-webkit-scrollbar-bg: $gray-lighter;
-    --cc-webkit-scrollbar-hover-bg: $btn-primary-color;
-
-    --cc-footer-bg: $panel-footer-bg;
-    --cc-footer-color: $text-color;
-    --cc-footer-border-color: $panel-default-border;
-<#LESS */
-/* #SCSS> */
     --cc-bg: #{$modal-content-bg};
     --cc-primary-color: #{$text-color};
     --cc-secondary-color: #{lighten($text-color, 10%)};
@@ -81,7 +30,7 @@
 
     --cc-toggle-readonly-bg: #{lighten($gray-light, 20%)};
     --cc-toggle-readonly-knob-bg: #{$body-bg};
-    --cc-toggle-readonly-knob-icon-color: lighten($gray-light, 20%);
+    --cc-toggle-readonly-knob-icon-color: #{lighten($gray-light, 20%)};
 
     --cc-section-category-border: #{$gray-lighter};
 
@@ -90,7 +39,7 @@
     --cc-cookie-category-block-hover-bg: #{darken($gray-lighter, 10%)};
     --cc-cookie-category-block-hover-border: #{$list-group-border};
     --cc-cookie-category-expanded-block-bg: #{$gray-lighter};
-    --cc-cookie-category-expanded-block-hover-bg: darken($gray-lighter, 10%);
+    --cc-cookie-category-expanded-block-hover-bg: #{darken($gray-lighter, 10%)};
 
     --cc-overlay-bg: #{$modal-backdrop-bg};
     --cc-webkit-scrollbar-bg: #{$gray-lighter};
@@ -99,5 +48,4 @@
     --cc-footer-bg: #{$panel-footer-bg};
     --cc-footer-color: #{$text-color};
     --cc-footer-border-color: #{$panel-default-border};
-/* <#SCSS */
 }
diff --git a/themes/bootstrap3/scss/components/cookie-consent/core/base.scss b/themes/bootstrap3/scss/components/cookie-consent/core/base.scss
@@ -5,24 +5,13 @@
  */
 
 :root{
-/* #LESS>
-    --cc-font-family: $font-family-base;
-    --cc-modal-border-radius: $border-radius-base;
-    --cc-btn-border-radius: $btn-border-radius-base;
-    --cc-modal-transition-duration: .25s;
-    --cc-link-color: $link-color;
-    --cc-modal-margin: 1rem;
-    --cc-z-index: $zindex-cookie-consent;
-<#LESS */
-/* #SCSS> */
     --cc-font-family: #{$font-family-base};
     --cc-modal-border-radius: #{$border-radius-base};
     --cc-btn-border-radius: #{$btn-border-radius-base};
     --cc-modal-transition-duration: .25s;
     --cc-link-color: #{$link-color};
     --cc-modal-margin: 1rem;
     --cc-z-index: #{$zindex-cookie-consent};
-/* <#SCSS */
 }
 
 #cc-main {

diff --git a/themes/sandal/scss/common.scss b/themes/sandal/scss/common.scss
@@ -53,7 +53,7 @@ mark { background-color: $highlighter-color; }
   outline: 4px solid var(--outline-color);
 }
 .form-control:focus {
-  --outline-color: $gold;
+  --outline-color: #{$gold};
 }
 
 .breadcrumb a { color: $dark-gray; }