From f78abfc28e6e4e3efa26d6922da1f081e8fc2dea Mon Sep 17 00:00:00 2001 From: Ere Maijala Date: Tue, 23 Apr 2024 16:25:05 +0300 Subject: [PATCH] Fix CSS variable handling in lessToSass conversion (#3611) --- Gruntfile.js | 7 ++- .../abstracts/light-color-scheme.less | 52 ----------------- .../components/cookie-consent/core/base.less | 11 ---- .../abstracts/light-color-scheme.scss | 56 +------------------ .../components/cookie-consent/core/base.scss | 11 ---- themes/sandal/scss/common.scss | 2 +- 6 files changed, 9 insertions(+), 130 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 2ff8a4e6e4b..47007cb4b74 100644 --- 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 index 5ce26b15cbc..ea200cb578d 100644 --- 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 index 5b6b1963312..f549aa84dab 100644 --- a/themes/bootstrap3/less/components/cookie-consent/core/base.less +++ b/themes/bootstrap3/less/components/cookie-consent/core/base.less @@ -5,7 +5,6 @@ */ :root{ -/* #LESS> */ --cc-font-family: @font-family-base; --cc-modal-border-radius: @border-radius-base; --cc-btn-border-radius: @btn-border-radius-base; @@ -13,16 +12,6 @@ --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 index 81ca4edb67d..65693ffa7c6 100644 --- 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 index ab25e0f4016..667e462334b 100644 --- a/themes/bootstrap3/scss/components/cookie-consent/core/base.scss +++ b/themes/bootstrap3/scss/components/cookie-consent/core/base.scss @@ -5,16 +5,6 @@ */ :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}; @@ -22,7 +12,6 @@ --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 index e10e3e1a181..c78ec2279dc 100644 --- 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; }