From c8482f09c68ce59d02eae0a6b58fbfd0b8d33c60 Mon Sep 17 00:00:00 2001 From: Benjamin Abraham Date: Fri, 28 Apr 2023 15:35:48 +0200 Subject: [PATCH] MDL-74869 theme: Moved activity icon color into variables Moved colors of the activity-icon-colors map into variables with default value to make them easy to override. --- .../moodle/components/activityicons.md | 16 +++++++--------- theme/boost/scss/moodle/variables.scss | 19 +++++++++++++------ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/admin/tool/componentlibrary/content/moodle/components/activityicons.md b/admin/tool/componentlibrary/content/moodle/components/activityicons.md index 9ed35978d1a..44ee26acbba 100644 --- a/admin/tool/componentlibrary/content/moodle/components/activityicons.md +++ b/admin/tool/componentlibrary/content/moodle/components/activityicons.md @@ -68,17 +68,15 @@ each defined as 'MOD_PURPOSE_X', so Assessment is MOD_PURPOSE_ASSESSMENT. ### Purpose colours -The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. Simply copy this array of scss colours, customise the colours and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```. +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 and done! There is no background colour for the 'Other' type purpose, it defaults to ```light-grey: #f8f9fa```. {{< highlight scss >}} -$activity-icon-colors: ( - "administration": #5d63f6, - "assessment": #eb00a2, - "collaboration": #f7634d, - "communication": #11a676, - "content": #399be2, - "interface": #a378ff -); +$activity-icon-administration-bg: #5d63f6; +$activity-icon-assessment-bg: #eb66a2; +$activity-icon-collaboration-bg: #f7634d; +$activity-icon-communication-bg: #11a676; +$activity-icon-content-bg: #399be2; +$activity-icon-interface-bg: #a378ff; {{}} ### Custom activity icons diff --git a/theme/boost/scss/moodle/variables.scss b/theme/boost/scss/moodle/variables.scss index b8f2e7cc36e..c2b86ed86f0 100644 --- a/theme/boost/scss/moodle/variables.scss +++ b/theme/boost/scss/moodle/variables.scss @@ -40,15 +40,22 @@ $primary-light-hover: theme-color-level('primary', -10) !default; $activity-iconcontainer-height: 50px; $activity-iconcontainer-width: 50px; +$activity-icon-administration-bg: #5d63f6 !default; +$activity-icon-assessment-bg: #eb66a2 !default; +$activity-icon-collaboration-bg: #f7634d !default; +$activity-icon-communication-bg: #11a676 !default; +$activity-icon-content-bg: #399be2 !default; +$activity-icon-interface-bg: #a378ff !default; + $activity-icon-colors: () !default; $activity-icon-colors: map-merge( ( - "administration": #5d63f6, - "assessment": #eb66a2, - "collaboration": #f7634d, - "communication": #11a676, - "content": #399be2, - "interface": #a378ff + "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, + "interface": $activity-icon-interface-bg ), $activity-icon-colors );