moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-07 09:56:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-83725 theme: dynamic activity icons colors

Browse source 
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.
This commit is contained in:
ferran 2024-11-21 10:08:32 +01:00
parent ab5692acdf
commit 41acfca9a8
6 changed files with 73 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

12
.upgradenotes/MDL-83725-2024121910085182.yml Normal file
View file

@ -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

15
admin/tool/componentlibrary/content/moodle/components/activityicons.md
View file

@ -74,7 +74,7 @@ Since Moodle 4.4, the available activity purposes are:
### Purpose colours ### 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 >}} {{< highlight scss >}}
$activity-icon-administration-bg: #da58ef !default; $activity-icon-administration-bg: #da58ef !default;
@ -83,19 +83,6 @@ $activity-icon-collaboration-bg: #5b40ff !default;
$activity-icon-communication-bg: #eb6200 !default; $activity-icon-communication-bg: #eb6200 !default;
$activity-icon-content-bg: #0099ad !default; $activity-icon-content-bg: #0099ad !default;
$activity-icon-interactivecontent-bg: #8d3d1b !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;
{{</ highlight >}} {{</ highlight >}}
### Custom activity icons ### Custom activity icons

30
theme/boost/scss/moodle/icons.scss
View file

@ -28,6 +28,34 @@ $iconsizes: map-merge((
), $iconsizes); ), $iconsizes);
// stylelint-enable // 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 xmlns="http://www.w3.org/2000/svg">' +
'<filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="' +
'0 0 0 0 #{$r} ' +
'0 0 0 0 #{$g} ' +
'0 0 0 0 #{$b} ' +
'0 0 0 #{$a} 0 ' +
'"/>' +
'</filter>' +
'</svg>' +
'##{$svg-filter-id}';
filter: url($svg-url);
}
.icon { .icon {
max-width: map-get($iconsizes, 4); max-width: map-get($iconsizes, 4);
max-height: map-get($iconsizes, 4); max-height: map-get($iconsizes, 4);
@ -195,7 +223,7 @@ img.icon {
.activityicon, .activityicon,
.icon { .icon {
&:not(.nofilter) { &:not(.nofilter) {
filter: $value; @include recolor-icon($value, 1);
} }
} }
} }

26
theme/boost/scss/moodle/variables.scss
View file

@ -46,28 +46,16 @@ $activity-icon-communication-bg: #eb6200 !default;
$activity-icon-content-bg: #0099ad !default; $activity-icon-content-bg: #0099ad !default;
$activity-icon-interactivecontent-bg: #8d3d1b !default; $activity-icon-interactivecontent-bg: #8d3d1b !default;
$activity-icon-administration-filter: // This is just to make it easier to iterate the colors.
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;
$activity-icon-colors: () !default; $activity-icon-colors: () !default;
$activity-icon-colors: map-merge( $activity-icon-colors: map-merge(
( (
"administration": $activity-icon-administration-filter, "administration": $activity-icon-administration-bg,
"assessment": $activity-icon-assessment-filter, "assessment": $activity-icon-assessment-bg,
"collaboration": $activity-icon-collaboration-filter, "collaboration": $activity-icon-collaboration-bg,
"communication": $activity-icon-communication-filter, "communication": $activity-icon-communication-bg,
"content": $activity-icon-content-filter, "content": $activity-icon-content-bg,
"interactivecontent": $activity-icon-interactivecontent-filter, "interactivecontent": $activity-icon-interactivecontent-bg,
), ),
$activity-icon-colors $activity-icon-colors
); );

24
theme/boost/style/moodle.css
View file

@ -26337,32 +26337,32 @@ img.icon {
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.icon-box { .icon-box {
@ -26402,12 +26402,12 @@ img.icon {
} }
:root { :root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); --activityadministration: #da58ef;
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); --activityassessment: #f90086;
--activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); --activitycollaboration: #5b40ff;
--activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); --activitycommunication: #eb6200;
--activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); --activitycontent: #0099ad;
--activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); --activityinteractivecontent: #8d3d1b;
} }
/* admin.less */ /* admin.less */

24
theme/classic/style/moodle.css
View file

@ -26337,32 +26337,32 @@ img.icon {
.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.administration:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.assessment:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.collaboration:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.communication:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.content:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter), .activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
.activityiconcontainer.interactivecontent:not(.isbranded) .icon: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,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
} }
.icon-box { .icon-box {
@ -26402,12 +26402,12 @@ img.icon {
} }
:root { :root {
--activityadministration: invert(45%) sepia(46%) saturate(3819%) hue-rotate(260deg) brightness(101%) contrast(87%); --activityadministration: #da58ef;
--activityassessment: invert(36%) sepia(98%) saturate(6969%) hue-rotate(315deg) brightness(90%) contrast(119%); --activityassessment: #f90086;
--activitycollaboration: invert(25%) sepia(54%) saturate(6226%) hue-rotate(245deg) brightness(100%) contrast(102%); --activitycollaboration: #5b40ff;
--activitycommunication: invert(48%) sepia(74%) saturate(4887%) hue-rotate(11deg) brightness(102%) contrast(101%); --activitycommunication: #eb6200;
--activitycontent: invert(49%) sepia(52%) saturate(4675%) hue-rotate(156deg) brightness(89%) contrast(102%); --activitycontent: #0099ad;
--activityinteractivecontent: invert(25%) sepia(63%) saturate(1152%) hue-rotate(344deg) brightness(94%) contrast(91%); --activityinteractivecontent: #8d3d1b;
} }
/* admin.less */ /* admin.less */