diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss index 8001266986f3..62228d25c40d 100644 --- a/client/src/curriculum/index.scss +++ b/client/src/curriculum/index.scss @@ -13,10 +13,7 @@ --cur-bg-color-list-item-header: var( --cur-bg-color-list-item-topic-standards ); - --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-standards); - --cur-bg-color-list-item-icon: var( - --cur-bg-color-list-item-icon-topic-standards - ); + --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-standards); } .topic-styling { @@ -25,10 +22,7 @@ --cur-bg-color-list-item-header: var( --cur-bg-color-list-item-topic-styling ); - --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-styling); - --cur-bg-color-list-item-icon: var( - --cur-bg-color-list-item-icon-topic-styling - ); + --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-styling); } .topic-scripting { @@ -37,10 +31,7 @@ --cur-bg-color-list-item-header: var( --cur-bg-color-list-item-topic-scripting ); - --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-scripting); - --cur-bg-color-list-item-icon: var( - --cur-bg-color-list-item-icon-topic-scripting - ); + --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-scripting); } .topic-tooling { @@ -49,10 +40,7 @@ --cur-bg-color-list-item-header: var( --cur-bg-color-list-item-topic-tooling ); - --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-tooling); - --cur-bg-color-list-item-icon: var( - --cur-bg-color-list-item-icon-topic-tooling - ); + --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-tooling); } .topic-practices { @@ -61,10 +49,7 @@ --cur-bg-color-list-item-header: var( --cur-bg-color-list-item-topic-practices ); - --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-practices); - --cur-bg-color-list-item-icon: var( - --cur-bg-color-list-item-icon-topic-practices - ); + --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-practices); } .curriculum-content { diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss index b9e55bf8357c..23d21ea5f5c3 100644 --- a/client/src/curriculum/modules-list.scss +++ b/client/src/curriculum/modules-list.scss @@ -185,14 +185,6 @@ svg.topic-icon { height: 4rem; width: 4rem; - - circle { - fill: var(--cur-bg-color-list-item-icon); - } - - path { - fill: var(--cur-color-list-item-icon); - } } > span { diff --git a/client/src/curriculum/topic-icon.scss b/client/src/curriculum/topic-icon.scss index 41ca11cfbb23..3f2c63de0b57 100644 --- a/client/src/curriculum/topic-icon.scss +++ b/client/src/curriculum/topic-icon.scss @@ -1,6 +1,6 @@ svg.topic-icon { circle { - fill: var(--background-primary); + fill: var(--cur-bg-color-topic-icon); } path { diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss index 526a0e6c3028..77c20030e818 100644 --- a/client/src/ui/base/_themes.scss +++ b/client/src/ui/base/_themes.scss @@ -230,16 +230,11 @@ --cur-border-color-list-item: #f2f1f1; --cur-border-color-list-item-hover: rgba(227, 100, 42, 0.7); --cur-bg-color-list-item-body: #fff; - --cur-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60}; - --cur-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60}; - --cur-color-list-item-icon-topic-scripting: #{$mdn-color-light-theme-yellow-60}; - --cur-color-list-item-icon-topic-tooling: #{$mdn-color-light-theme-green-60}; - --cur-color-list-item-icon-topic-practices: #{$mdn-color-light-theme-violet-60}; - --cur-bg-color-list-item-icon-topic-standards: #fff; - --cur-bg-color-list-item-icon-topic-styling: #fff; - --cur-bg-color-list-item-icon-topic-scripting: #fff; - --cur-bg-color-list-item-icon-topic-tooling: #fff; - --cur-bg-color-list-item-icon-topic-practices: #fff; + --cur-bg-color-topic-icon-topic-standards: #fff; + --cur-bg-color-topic-icon-topic-styling: #fff; + --cur-bg-color-topic-icon-topic-scripting: #fff; + --cur-bg-color-topic-icon-topic-tooling: #fff; + --cur-bg-color-topic-icon-topic-practices: #fff; --cur-bg-color-list-item-topic-standards: #{$mdn-color-light-theme-red-50}30; --cur-bg-color-list-item-topic-styling: #{$mdn-color-light-theme-blue-50}30; --cur-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30; @@ -480,11 +475,11 @@ --baseline-limited-cross: #ea8600; --cur-color: #e3642a; - --cur-color-topic-standards: #{$mdn-color-light-theme-red-30}; - --cur-color-topic-styling: #{$mdn-color-light-theme-blue-30}; - --cur-color-topic-scripting: #cfc23f; - --cur-color-topic-tooling: #55ab2d; - --cur-color-topic-practices: #ce93fa; + --cur-color-topic-standards: #f2919c; + --cur-color-topic-styling: #91a6f2; + --cur-color-topic-scripting: #f2cf8f; + --cur-color-topic-tooling: #8ff2a4; + --cur-color-topic-practices: #c891f2; --cur-bg-color: #664b33; --cur-bg-color-note: #332e2b; --cur-bg-large-color: #343434; @@ -509,16 +504,11 @@ --cur-bg-color-list-item-topic-scripting: #343434; --cur-bg-color-list-item-topic-tooling: #343434; --cur-bg-color-list-item-topic-practices: #343434; - --cur-color-list-item-icon-topic-standards: #f2919c; - --cur-color-list-item-icon-topic-styling: #91a6f2; - --cur-color-list-item-icon-topic-scripting: #f2cf8f; - --cur-color-list-item-icon-topic-tooling: #8ff2a4; - --cur-color-list-item-icon-topic-practices: #c891f2; - --cur-bg-color-list-item-icon-topic-standards: #804248; - --cur-bg-color-list-item-icon-topic-styling: #425080; - --cur-bg-color-list-item-icon-topic-scripting: #806a42; - --cur-bg-color-list-item-icon-topic-tooling: #428050; - --cur-bg-color-list-item-icon-topic-practices: #584280; + --cur-bg-color-topic-icon-topic-standards: #804248; + --cur-bg-color-topic-icon-topic-styling: #425080; + --cur-bg-color-topic-icon-topic-scripting: #806a42; + --cur-bg-color-topic-icon-topic-tooling: #428050; + --cur-bg-color-topic-icon-topic-practices: #584280; --cur-shadow: 2px 2px 5px 0 rgba(36, 36, 36, 0.15), -2px 2px 8px 0 rgba(87, 87, 87, 0.15); --cur-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),