From 41acfca9a8c711618e6cca195006a9c115dd59e5 Mon Sep 17 00:00:00 2001 From: ferran Date: Thu, 21 Nov 2024 10:08:32 +0100 Subject: [PATCH] MDL-83725 theme: dynamic activity icons colors Now themes can change the activity purpose colors using only the $activity-icon-XXXX-bg scss variables. The filter is not computed using a sass mixin intead of a custom filter. --- .upgradenotes/MDL-83725-2024121910085182.yml | 12 ++++++++ .../moodle/components/activityicons.md | 15 +--------- theme/boost/scss/moodle/icons.scss | 30 ++++++++++++++++++- theme/boost/scss/moodle/variables.scss | 26 +++++----------- theme/boost/style/moodle.css | 24 +++++++-------- theme/classic/style/moodle.css | 24 +++++++-------- 6 files changed, 73 insertions(+), 58 deletions(-) create mode 100644 .upgradenotes/MDL-83725-2024121910085182.yml diff --git a/.upgradenotes/MDL-83725-2024121910085182.yml b/.upgradenotes/MDL-83725-2024121910085182.yml new file mode 100644 index 00000000000..d01d1c50911 --- /dev/null +++ b/.upgradenotes/MDL-83725-2024121910085182.yml @@ -0,0 +1,12 @@ +issueNumber: MDL-83725 +notes: + theme_boost: + - message: >- + From now on, themes can customise the activity icon colours using simple + CSS variables. The new variables are $activity-icon-administration-bg, + $activity-icon-assessment-bg, $activity-icon-collaboration-bg, + $activity-icon-communication-bg, $activity-icon-content-bg, + $activity-icon-interactivecontent-bg. All previous + `$activity-icon-*-filter` elements can be removed, as they are no longer + in use. + type: changed diff --git a/admin/tool/componentlibrary/content/moodle/components/activityicons.md b/admin/tool/componentlibrary/content/moodle/components/activityicons.md index 418a30e2234..2a8e393dd8c 100644 --- a/admin/tool/componentlibrary/content/moodle/components/activityicons.md +++ b/admin/tool/componentlibrary/content/moodle/components/activityicons.md @@ -74,7 +74,7 @@ Since Moodle 4.4, the available activity purposes are: ### Purpose colours -The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy any of these scss variables that you want to customize, change the colour value, generate the filter using, for instance https://codepen.io/sosuke/pen/Pjoqqp and done! There is no background colour or filter for the 'Other' or the 'Interface' purposes. +The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. The following variables are available: {{< highlight scss >}} $activity-icon-administration-bg: #da58ef !default; @@ -83,19 +83,6 @@ $activity-icon-collaboration-bg: #5b40ff !default; $activity-icon-communication-bg: #eb6200 !default; $activity-icon-content-bg: #0099ad !default; $activity-icon-interactivecontent-bg: #8d3d1b !default; - -$activity-icon-administration-filter: - invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%) !default; -$activity-icon-assessment-filter: - invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%) !default; -$activity-icon-collaboration-filter: - invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%) !default; -$activity-icon-communication-filter: - invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%) !default; -$activity-icon-content-filter: - invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%) !default; -$activity-icon-interactivecontent-filter: - invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%) !default; {{}} ### Custom activity icons diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss index c4b5f3f3554..9524e56eb29 100644 --- a/theme/boost/scss/moodle/icons.scss +++ b/theme/boost/scss/moodle/icons.scss @@ -28,6 +28,34 @@ $iconsizes: map-merge(( ), $iconsizes); // stylelint-enable +// This mixin change an icon color using filters. +// The code is adapted from https://jsfiddle.net/Tegos/3fchp0qm/ example. +@mixin recolor-icon($color: #000, $opacity: 1) { + // Extracting the color component using / 255 is deprecated in Sass. + // However, the alternative of using math.div is not working in moodle yet. + // The workaround to extract the color component is multiply by 1/255 as float. + $r: red($color) * 0.00392156862745098; + $g: green($color) * 0.00392156862745098; + $b: blue($color) * 0.00392156862745098; + $a: $opacity; + $svg-filter-id: "recolor"; + + $svg-url: 'data:image/svg+xml;utf8,' + + '' + + '' + + '' + + '' + + '' + + '##{$svg-filter-id}'; + + filter: url($svg-url); +} + .icon { max-width: map-get($iconsizes, 4); max-height: map-get($iconsizes, 4); @@ -195,7 +223,7 @@ img.icon { .activityicon, .icon { &:not(.nofilter) { - filter: $value; + @include recolor-icon($value, 1); } } } diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss index 4a09a57880d..cbbc9402f18 100644 --- a/theme/boost/scss/moodle/variables.scss +++ b/theme/boost/scss/moodle/variables.scss @@ -46,28 +46,16 @@ $activity-icon-communication-bg: #eb6200 !default; $activity-icon-content-bg: #0099ad !default; $activity-icon-interactivecontent-bg: #8d3d1b !default; -$activity-icon-administration-filter: - invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%) !default; -$activity-icon-assessment-filter: - invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%) !default; -$activity-icon-collaboration-filter: - invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%) !default; -$activity-icon-communication-filter: - invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%) !default; -$activity-icon-content-filter: - invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%) !default; -$activity-icon-interactivecontent-filter: - invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%) !default; - +// This is just to make it easier to iterate the colors. $activity-icon-colors: () !default; $activity-icon-colors: map-merge( ( - "administration": $activity-icon-administration-filter, - "assessment": $activity-icon-assessment-filter, - "collaboration": $activity-icon-collaboration-filter, - "communication": $activity-icon-communication-filter, - "content": $activity-icon-content-filter, - "interactivecontent": $activity-icon-interactivecontent-filter, + "administration": $activity-icon-administration-bg, + "assessment": $activity-icon-assessment-bg, + "collaboration": $activity-icon-collaboration-bg, + "communication": $activity-icon-communication-bg, + "content": $activity-icon-content-bg, + "interactivecontent": $activity-icon-interactivecontent-bg, ), $activity-icon-colors ); diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 7aa7f3d4203..f0618dcc999 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -26337,32 +26337,32 @@ img.icon { .activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) { - filter: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { - filter: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { - filter: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { - filter: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { - filter: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { - filter: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .icon-box { @@ -26402,12 +26402,12 @@ img.icon { } :root { - --activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); - --activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); - --activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); - --activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); - --activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); - --activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); + --activityadministration: #da58ef; + --activityassessment: #f90086; + --activitycollaboration: #5b40ff; + --activitycommunication: #eb6200; + --activitycontent: #0099ad; + --activityinteractivecontent: #8d3d1b; } /* admin.less */ diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 2e859027a47..00dd0751520 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -26337,32 +26337,32 @@ img.icon { .activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) { - filter: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) { - filter: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) { - filter: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) { - filter: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) { - filter: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) { - filter: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); + filter: url('data:image/svg+xml;utf8,#recolor'); } .icon-box { @@ -26402,12 +26402,12 @@ img.icon { } :root { - --activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); - --activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); - --activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); - --activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); - --activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); - --activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); + --activityadministration: #da58ef; + --activityassessment: #f90086; + --activitycollaboration: #5b40ff; + --activitycommunication: #eb6200; + --activitycontent: #0099ad; + --activityinteractivecontent: #8d3d1b; } /* admin.less */