Color indicators added for all color combinations (#40), more variables added for hex colors, fixed Sass variable issue

2025-11-04 00:50:45 +00:00 · 2020-12-21 09:11:09 -05:00 · 2020-12-21 09:11:09 -05:00 · 913e1dd26b
commit 913e1dd26b
parent c7cdd21f56
22 changed files with 768 additions and 33 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -11,6 +11,12 @@ All notable changes to this project will be documented in this file.

 ## Versions 

+### [1.10.0] 2020-12-21 Color indicators
+
+* **Added:** Color indicator symbols added for all color combinations ([#40](https://github.com/andrewgioia/mana/issues/40))
+* **Added:** New variables added for colors used in project as the beginning of getting all of these things into variables
+* **Fixed:** Sass variables were not called correctly in `_duo.scss`, this is now fixed
+
 ### [1.9.4] 2020-10-10 Kicker, Party, and Landfall abilities

 * **Added:** New ability symbols in Arena for Kicker, Party, and Landfall.
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# Mana v1.9.4
+# Mana v1.10.0

 ## The Magic: the Gathering mana symbol font!

--- a/bower.json
+++ b/bower.json
@ -1,7 +1,7 @@
 {
  "name": "mana",
  "homepage": "https://github.com/andrewgioia/mana",
-  "version": "1.9.4",
+  "version": "1.10.0",
  "authors": [
    "Andrew Gioia <andrew@gioia.email>"
  ],
--- a/css/mana.css
+++ b/css/mana.css
@ -1,14 +1,14 @@
@font-face {
  font-family: 'Mana';
-  src: url('../fonts/mana.eot?v=1.9.4');
-  src: url('../fonts/mana.eot?#iefix&v=1.9.4') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.4') format('woff'), url('../fonts/mana.ttf?v=1.9.4') format('truetype'), url('../fonts/mana.svg?v=1.9.4#mana') format('svg');
+  src: url('../fonts/mana.eot?v=1.10.0');
+  src: url('../fonts/mana.eot?#iefix&v=1.10.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.10.0') format('woff'), url('../fonts/mana.ttf?v=1.10.0') format('truetype'), url('../fonts/mana.svg?v=1.10.0#mana') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@font-face {
  font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.9.4');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.9.4') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.4') format('woff'), url('../fonts/mplantin.ttf?v=1.9.4') format('truetype'), url('../fonts/mplantin.svg?v=1.9.4#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?v=1.10.0');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.10.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.10.0') format('woff'), url('../fonts/mplantin.ttf?v=1.10.0') format('truetype'), url('../fonts/mplantin.svg?v=1.10.0#mplantin') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -632,7 +632,7 @@
  content: "\e968";
 }
 .ms-cost {
-  background-color: #BEB9B2;
+  background-color: #beb9b2;
  border-radius: 1em;
  color: #111;
  font-size: 0.95em;
@ -643,23 +643,23 @@
 }
 .ms-cost.ms-w,
 .ms-cost.ms-wp {
-  background-color: #F0F2C0;
+  background-color: #f0f2c0;
 }
 .ms-cost.ms-u,
 .ms-cost.ms-up {
-  background-color: #B5CDE3;
+  background-color: #b5cde3;
 }
 .ms-cost.ms-b,
 .ms-cost.ms-bp {
-  background-color: #ACA29A;
+  background-color: #aca29a;
 }
 .ms-cost.ms-r,
 .ms-cost.ms-rp {
-  background-color: #DB8664;
+  background-color: #db8664;
 }
 .ms-cost.ms-g,
 .ms-cost.ms-gp {
-  background-color: #93B483;
+  background-color: #93b483;
 }
 .ms-cost.ms-wu,
 .ms-cost.ms-wb,
@ -1316,7 +1316,7 @@ span.ms-half > .ms-cost {
  content: "\e986";
 }
 .ms-duo-color::before {
-  color: #000;
+  color: #010101;
 }
 .ms-duo-color.ms-multicolor::after {
  color: #cca753;
@ -1326,6 +1326,142 @@ span.ms-half > .ms-cost {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }
+.ms-ci {
+  border-radius: 100%;
+  box-shadow: inset 0 0 1px #fff;
+  line-height: 0.95em;
+  width: 1em;
+  height: 1em;
+}
+.ms-ci::before {
+  color: #010101;
+}
+.ms-ci-1::before {
+  content: "\e98a";
+}
+.ms-ci-2::before {
+  content: "\e98b";
+}
+.ms-ci-3::before {
+  content: "\e98c";
+}
+.ms-ci-4::before {
+  content: "\e98d";
+}
+.ms-ci-5::before {
+  content: "\e98e";
+}
+.ms-ci-w {
+  background: #fff;
+}
+.ms-ci-u {
+  background: #3b6ba0;
+}
+.ms-ci-b {
+  background: #383431;
+}
+.ms-ci-r {
+  background: #c6553e;
+}
+.ms-ci-g {
+  background: #3d684b;
+}
+.ms-ci-wu {
+  background: conic-gradient(#fff 45deg, #3b6ba0 45deg 225deg, #fff 225deg);
+}
+.ms-ci-wb {
+  background: conic-gradient(#fff 45deg, #383431 45deg 225deg, #fff 225deg);
+}
+.ms-ci-ub {
+  background: conic-gradient(#3b6ba0 45deg, #383431 45deg 225deg, #3b6ba0 225deg);
+}
+.ms-ci-ur {
+  background: conic-gradient(#3b6ba0 45deg, #c6553e 45deg 225deg, #3b6ba0 225deg);
+}
+.ms-ci-bg {
+  background: conic-gradient(#383431 45deg, #3d684b 45deg 225deg, #383431 225deg);
+}
+.ms-ci-br {
+  background: conic-gradient(#383431 45deg, #c6553e 45deg 225deg, #383431 225deg);
+}
+.ms-ci-rw {
+  background: conic-gradient(#c6553e 45deg, #fff 45deg 225deg, #c6553e 225deg);
+}
+.ms-ci-rg {
+  background: conic-gradient(#c6553e 45deg, #3d684b 45deg 225deg, #c6553e 225deg);
+}
+.ms-ci-gu {
+  background: conic-gradient(#3d684b 45deg, #3b6ba0 45deg 225deg, #3d684b 225deg);
+}
+.ms-ci-gw {
+  background: conic-gradient(#3d684b 45deg, #fff 45deg 225deg, #3d684b 225deg);
+}
+.ms-ci-wug,
+.ms-ci-bant {
+  background: conic-gradient(#3b6ba0 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #3b6ba0 300deg);
+}
+.ms-ci-ubw,
+.ms-ci-esper {
+  background: conic-gradient(#383431 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #383431 300deg);
+}
+.ms-ci-bru,
+.ms-ci-grixis {
+  background: conic-gradient(#c6553e 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #c6553e 300deg);
+}
+.ms-ci-rgb,
+.ms-ci-jund {
+  background: conic-gradient(#3d684b 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #3d684b 300deg);
+}
+.ms-ci-gwr,
+.ms-ci-naya {
+  background: conic-gradient(#fff 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #fff 300deg);
+}
+.ms-ci-wbg,
+.ms-ci-abzan,
+.ms-ci-junk {
+  background: conic-gradient(#383431 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #383431 300deg);
+}
+.ms-ci-urw,
+.ms-ci-jeskai {
+  background: conic-gradient(#c6553e 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #c6553e 300deg);
+}
+.ms-ci-bgu,
+.ms-ci-sultai,
+.ms-ci-bug {
+  background: conic-gradient(#3d684b 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #3d684b 300deg);
+}
+.ms-ci-rwb,
+.ms-ci-mardu {
+  background: conic-gradient(#fff 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #fff 300deg);
+}
+.ms-ci-gur,
+.ms-ci-temur,
+.ms-ci-rug {
+  background: conic-gradient(#3b6ba0 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #3b6ba0 300deg);
+}
+.ms-ci-ubrg,
+.ms-ci-glint {
+  background: conic-gradient(#3b6ba0 45deg, #383431 45deg 135deg, #c6553e 135deg 225deg, #3d684b 225deg 315deg, #3b6ba0 315deg);
+}
+.ms-ci-brgw,
+.ms-ci-dune {
+  background: conic-gradient(#383431 45deg, #c6553e 45deg 135deg, #3d684b 135deg 225deg, #fff 225deg 315deg, #383431 315deg);
+}
+.ms-ci-rgwu,
+.ms-ci-ink {
+  background: conic-gradient(#c6553e 45deg, #3d684b 45deg 135deg, #fff 135deg 225deg, #3b6ba0 225deg 315deg, #c6553e 315deg);
+}
+.ms-ci-gwub,
+.ms-ci-witch {
+  background: conic-gradient(#3d684b 45deg, #fff 45deg 135deg, #3b6ba0 135deg 225deg, #383431 225deg 315deg, #3d684b 315deg);
+}
+.ms-ci-wubr,
+.ms-ci-yore {
+  background: conic-gradient(#fff 45deg, #3b6ba0 45deg 135deg, #383431 135deg 225deg, #c6553e 225deg 315deg, #fff 315deg);
+}
+.ms-ci-5 {
+  background: conic-gradient(#fff 36deg, #3b6ba0 36deg 108deg, #383431 108deg 180deg, #c6553e 180deg 252deg, #3d684b 252deg 324deg, #fff 324deg);
+}
 .ms-mechanic {
  background: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);
  -webkit-background-clip: text;
--- a/css/mana.min.css
+++ b/css/mana.min.css
--- a/fonts/mana.eot
+++ b/fonts/mana.eot
--- a/fonts/mana.svg
+++ b/fonts/mana.svg
@ -192,4 +192,9 @@
 <glyph unicode="&#xe987;" glyph-name="ability-party" horiz-adv-x="880" d="M261.768 698.647l161.302 160.88c9.546 9.52 25.020 9.52 34.566 0l161.302-160.88c9.546-9.52 9.546-24.954 0-34.474l-161.302-160.88c-9.546-9.52-25.020-9.52-34.566 0l-161.302 160.88c-9.546 9.52-9.546 24.954 0 34.474zM515.67 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM7.158 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM261.768 189.161c-9.546-9.52-9.546-24.954 0-34.474l161.302-160.88c9.546-9.52 25.020-9.52 34.566 0l161.302 160.88c9.546 9.52 9.546 24.954 0 34.474l-161.302 160.88c-9.546 9.52-25.020 9.52-34.566 0l-161.302-160.88z" />
 <glyph unicode="&#xe988;" glyph-name="ability-landfall" d="M512.658 860.567c13.492 13.638 36.15 21.64 53.62 3.782 27.126-27.728 61.19 35.29 107.87-52.306 21.632-40.592 67.574 33.108 107.872 16.386 41.002-17.016 49.426-74.722 89.93-84.236 32.994-2.278 73.452 49.574 95.764-10.852 10.352-28.036 61.14-31.618 55.91-64.98-52.578-23.716-119.63-17.506-158.336-72.472-9.546-13.554 23.034-30.704 10.092-40.962-58.036-46.004-148.552-37.042-217.222-53.656l-9.242-15.034c69.074-2.278 153.92-7.564 216.372 25.836 33.192 17.754 47.894 47.57 35.956 80.664 35.14 8.040 70.852 36.766 107.87 35.292-16.094-74.23-72.78-140.66-102.824-208.592-20.788 2.946-39.168 15.51-60.36 16.448-26.556-77.446-19.648-155.99-23.538-236.384-5.902-4.69-23.116-19.888-29.018-24.578 0 0 0 0 0 0-2.816 85.754-0.958 175.208-2.836 260.828-1.24-0.4-2.324-1.064-3.486-1.45-39.098-12.974 1.558-94.762-29.634-125.148-61.43-60.428-39.226-167.028-47.944-245.142l-13.246 6.302c-1.074 111.88 1.63 227.16 0.96 339.042l-15.47 3.15c5.070-40.57 8.832-110.284-4.416-112.804-22.91-4.36 0.508-56.13-32.17-59.238-13.434-1.278-12.618-3.782-19.556-37.812-5.916-29.012-47.122-70.98-78.222-76.882-8.732-1.658-20.166 12.012-29.018 11.344 1.476 68.066-7.012 138.714-16.402 205.44l-13.878-10.712c-0.67-139.618 20.744-267.848 11.356-407.732l-16.286-9.442c-12.806 82.862-7.054 203.54-26.61 230.638-3.042 4.214-2.964 75.932-17.664 112.172-89.192-14.738-57.58 90.268-97.146 132.34-2.95-121.26 3.408-254.962 1.262-376.222l-21.448 5.672c2.362 99.082-27.756 189.686-29.018 302.49-0.012 1.072-15.14 3.782-36.010-18.42-1.974-2.1-5.034-1.914-6.886-2.376-69.476 87.762-148.124 177.41-190.506 282.324 10.064-2.782 32.802 5.042 42.264-11.344 10.592-18.34 30.11-3.522 48.574-13.234 5.498-16.614 15.148-42.822 27.756-56.086 61.294-9.246 127.642-19.788 189.876-17.646-20.654 44.62-187.744 1.83-151.396 85.706-74.172 11.926-157.414 32.824-214.954 82.132-7.376 28.54 20.14 66.188 43.37 60.922 14.588-3.308 41.426-10.268 52.99-4.412 46.048 23.316 85.16 87.596 177.26 53.566 53.328-19.706-32.804 75.622 51.096 52.306 1.866-0.52 1.182 19.108 3.154 18.274 12.598 9.928 40.218-8.672 49.204 3.152 25.864 34.030 52.596-12.892 80.746-10.714 35.092 2.716 40.004 20.9 53.618 34.66z" />
 <glyph unicode="&#xe989;" glyph-name="ability-kicker" horiz-adv-x="784" d="M392 827.955l392-341.040v-218.012l-392 327.016-392-327.016v218.010l392 341.042zM390.362 507.555l-249.968-208.094v-171.274l249.968 199.536 253.244-202.152v171.162l-253.244 210.822zM392 241.203l-133.906-111.44 120.78-99.726c4.196-2.834 7.726-4.708 12.97-4.656 5.012 0.254 6.968 0.648 14.044 5.104 7.074 4.454 119.706 99.278 119.706 99.278l-133.594 111.44z" />
+<glyph unicode="&#xe98a;" glyph-name="ci-1" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688s200.884-448.688 448.688-448.688c247.804 0 448.688 200.884 448.688 448.688s-200.884 448.688-448.688 448.688z" />
+<glyph unicode="&#xe98b;" glyph-name="ci-2" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM851.164 720.421l-632.918-632.918c81.83-71.008 185.87-108.158 293.754-109.524 247.804 0 448.688 200.884 448.688 448.688-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688 0.638-107.436 38.818-215.966 111.602-296.040l633.126 633.126c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98c;" glyph-name="ci-3" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM115.88 637.341c-35.408-64.442-51.642-137.532-52.568-210.674 0.314-231.214 184.17-435.738 418.12-447.58v423.676l-365.552 234.578zM917.446 618.803l-374.878-216.436v-423.28c236.964 13.038 415.166 214.242 418.12 447.58-0.16 66.226-14.458 132.396-43.242 192.136zM512 875.355c-146.132-0.038-276.922-69.96-363.792-186.12l364.182-233.698 375.158 216.598c-84.128 127.838-223.14 201.29-375.548 203.22z" />
+<glyph unicode="&#xe98d;" glyph-name="ci-4" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM513.092 382.347l-294.846-294.846c81.83-71.006 185.87-108.158 293.754-109.522 106.678 0.782 215.252 38.18 294.896 110.562l-293.804 293.806zM173.874 721.563c-72.47-80.34-109.206-187.698-110.562-294.896 0.638-107.436 38.818-215.966 111.602-296.040l294.948 294.948-295.988 295.988zM851.164 720.421l-294.844-294.846 293.806-293.806c72.47 80.342 109.206 187.7 110.562 294.898-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-106.68-0.782-215.25-38.182-294.898-110.562l295.99-295.99 294.948 294.95c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98e;" glyph-name="ci-5" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM481.432 383.899l-385.022-126.428c63.62-155.132 215.888-269.822 385.022-278.384v404.812zM542.568 384.215v-405.128c170.242 8.352 319.536 123.548 384.876 278.044l-384.876 127.084zM802.336 768.661l-236.006-327.91 380.258-125.56c9.892 36.32 13.624 73.934 14.1 111.476-0.458 129.734-57.626 258.87-158.352 341.994zM222.188 769.095c-101.746-83.59-157.228-212.114-158.876-342.428-0.060-37.468 4.676-74.846 14.006-111.118l383.986 126.086-239.116 327.46zM512 875.355c-87.528 0.264-166.312-24.796-240.626-69.95l242.786-332.486 239.046 332.134c-72.142 46.398-155.786 69.222-241.206 70.302z" />
 </font></defs></svg>
--- a/fonts/mana.ttf
+++ b/fonts/mana.ttf
--- a/fonts/mana.woff
+++ b/fonts/mana.woff
--- a/fonts/mana.woff2
+++ b/fonts/mana.woff2
--- a/index.html
+++ b/index.html
@ -182,6 +182,44 @@
            <i class="ms ms-1000000 ms-cost ms-shadow"></i>
            <i class="ms ms-acorn"></i>
        </p>
+        <h3>Color indicators</h3>
+        <p>
+            <i class="ms ms-ci ms-ci-1 ms-ci-w"></i>
+            <i class="ms ms-ci ms-ci-1 ms-ci-u"></i>
+            <i class="ms ms-ci ms-ci-1 ms-ci-b"></i>
+            <i class="ms ms-ci ms-ci-1 ms-ci-r"></i>
+            <i class="ms ms-ci ms-ci-1 ms-ci-g"></i>
+            &nbsp;
+            <i class="ms ms-ci ms-ci-2 ms-ci-wu"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-wb"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-ub"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-ur"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-bg"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-br"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-rw"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-rg"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-gu"></i>
+            <i class="ms ms-ci ms-ci-2 ms-ci-gw"></i>
+            <br />
+            <i class="ms ms-ci ms-ci-3 ms-ci-wug"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-ubw"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-bru"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-rgb"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-gwr"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-wbg"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-urw"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-bgu"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-rwb"></i>
+            <i class="ms ms-ci ms-ci-3 ms-ci-gur"></i>
+            &nbsp;
+            <i class="ms ms-ci ms-ci-4 ms-ci-ubrg"></i>
+            <i class="ms ms-ci ms-ci-4 ms-ci-brgw"></i>
+            <i class="ms ms-ci ms-ci-4 ms-ci-rgwu"></i>
+            <i class="ms ms-ci ms-ci-4 ms-ci-gwub"></i>
+            <i class="ms ms-ci ms-ci-4 ms-ci-wubr"></i>
+            &nbsp;
+            <i class="ms ms-ci ms-ci-5"></i>
+        </p>
    </div>
    <div class="right">
        <h3>Future Sight and other type symbols</h3>
--- a/less/colors.less
+++ b/less/colors.less
@ -0,0 +1,259 @@
+// color indicator circles
+
+.@{ms-prefix}-ci {
+
+    // base styles
+    border-radius: 100%;
+    box-shadow: inset 0 0 1px #fff; // to remove spill over
+    line-height: 0.95em; // shifts the border up a touch
+    width: 1em;
+    height: 1em;
+
+    // set the border color
+    &::before { color: @ms-border-black; }
+
+    // borders based on number of colors in identity
+    &-1::before { content: "\e98a"; }
+    &-2::before { content: "\e98b"; }
+    &-3::before { content: "\e98c"; }
+    &-4::before { content: "\e98d"; }
+    &-5::before { content: "\e98e"; }
+
+    // 1 color backgrounds
+    &-w { background: @ms-white; }
+    &-u { background: @ms-blue; }
+    &-b { background: @ms-black; }
+    &-r { background: @ms-red; }
+    &-g { background: @ms-green; }
+
+    // 2 color backgrounds
+    &-wu {
+        background: conic-gradient(
+            @ms-white 45deg,
+            @ms-blue 45deg 225deg,
+            @ms-white 225deg
+        );
+    }
+    &-wb {
+        background: conic-gradient(
+            @ms-white 45deg,
+            @ms-black 45deg 225deg,
+            @ms-white 225deg
+        );
+    }
+    &-ub {
+        background: conic-gradient(
+            @ms-blue 45deg,
+            @ms-black 45deg 225deg,
+            @ms-blue 225deg
+        );
+    }
+    &-ur {
+        background: conic-gradient(
+            @ms-blue 45deg,
+            @ms-red 45deg 225deg,
+            @ms-blue 225deg
+        );
+    }
+    &-bg {
+        background: conic-gradient(
+            @ms-black 45deg,
+            @ms-green 45deg 225deg,
+            @ms-black 225deg
+        );
+    }
+    &-br {
+        background: conic-gradient(
+            @ms-black 45deg,
+            @ms-red 45deg 225deg,
+            @ms-black 225deg
+        );
+    }
+    &-rw {
+        background: conic-gradient(
+            @ms-red 45deg,
+            @ms-white 45deg 225deg,
+            @ms-red 225deg
+        );
+    }
+    &-rg {
+        background: conic-gradient(
+            @ms-red 45deg,
+            @ms-green 45deg 225deg,
+            @ms-red 225deg
+        );
+    }
+    &-gu {
+        background: conic-gradient(
+            @ms-green 45deg,
+            @ms-blue 45deg 225deg,
+            @ms-green 225deg
+        );
+    }
+    &-gw {
+        background: conic-gradient(
+            @ms-green 45deg,
+            @ms-white 45deg 225deg,
+            @ms-green 225deg
+        );
+    }
+
+    // 3-color backgrounds
+    &-wug,
+    &-bant {
+        background: conic-gradient(
+            @ms-blue 60deg,
+            @ms-green 60deg 180deg,
+            @ms-white 180deg 300deg,
+            @ms-blue 300deg
+        );
+    }
+    &-ubw,
+    &-esper {
+        background: conic-gradient(
+            @ms-black 60deg,
+            @ms-white 60deg 180deg,
+            @ms-blue 180deg 300deg,
+            @ms-black 300deg
+        );
+    }
+    &-bru,
+    &-grixis {
+        background: conic-gradient(
+            @ms-red 60deg,
+            @ms-blue 60deg 180deg,
+            @ms-black 180deg 300deg,
+            @ms-red 300deg
+        );
+    }
+    &-rgb,
+    &-jund {
+        background: conic-gradient(
+            @ms-green 60deg,
+            @ms-black 60deg 180deg,
+            @ms-red 180deg 300deg,
+            @ms-green 300deg
+        );
+    }
+    &-gwr,
+    &-naya {
+        background: conic-gradient(
+            @ms-white 60deg,
+            @ms-red 60deg 180deg,
+            @ms-green 180deg 300deg,
+            @ms-white 300deg
+        );
+    }
+    &-wbg,
+    &-abzan,
+    &-junk {
+        background: conic-gradient(
+            @ms-black 60deg,
+            @ms-green 60deg 180deg,
+            @ms-white 180deg 300deg,
+            @ms-black 300deg
+        );
+    }
+    &-urw,
+    &-jeskai {
+        background: conic-gradient(
+            @ms-red 60deg,
+            @ms-white 60deg 180deg,
+            @ms-blue 180deg 300deg,
+            @ms-red 300deg
+        );
+    }
+    &-bgu,
+    &-sultai,
+    &-bug {
+        background: conic-gradient(
+            @ms-green 60deg,
+            @ms-blue 60deg 180deg,
+            @ms-black 180deg 300deg,
+            @ms-green 300deg
+        );
+    }
+    &-rwb,
+    &-mardu {
+        background: conic-gradient(
+            @ms-white 60deg,
+            @ms-black 60deg 180deg,
+            @ms-red 180deg 300deg,
+            @ms-white 300deg
+        );
+    }
+    &-gur,
+    &-temur,
+    &-rug {
+        background: conic-gradient(
+            @ms-blue 60deg,
+            @ms-red 60deg 180deg,
+            @ms-green 180deg 300deg,
+            @ms-blue 300deg
+        );
+    }
+
+    // 4 color backgrounds
+    &-ubrg,
+    &-glint {
+        background: conic-gradient(
+            @ms-blue 45deg,
+            @ms-black 45deg 135deg,
+            @ms-red 135deg 225deg,
+            @ms-green 225deg 315deg,
+            @ms-blue 315deg
+        );
+    }
+    &-brgw,
+    &-dune {
+        background: conic-gradient(
+            @ms-black 45deg,
+            @ms-red 45deg 135deg,
+            @ms-green 135deg 225deg,
+            @ms-white 225deg 315deg,
+            @ms-black 315deg
+        );
+    }
+    &-rgwu,
+    &-ink {
+        background: conic-gradient(
+            @ms-red 45deg,
+            @ms-green 45deg 135deg,
+            @ms-white 135deg 225deg,
+            @ms-blue 225deg 315deg,
+            @ms-red 315deg
+        );
+    }
+    &-gwub,
+    &-witch {
+        background: conic-gradient(
+            @ms-green 45deg,
+            @ms-white 45deg 135deg,
+            @ms-blue 135deg 225deg,
+            @ms-black 225deg 315deg,
+            @ms-green 315deg
+        );
+    }
+    &-wubr,
+    &-yore {
+        background: conic-gradient(
+            @ms-white 45deg,
+            @ms-blue 45deg 135deg,
+            @ms-black 135deg 225deg,
+            @ms-red 225deg 315deg,
+            @ms-white 315deg
+        );
+    }
+
+    // 5 color background
+    &-5 {
+        background: conic-gradient(
+            @ms-white 36deg,
+            @ms-blue 36deg 108deg,
+            @ms-black 108deg 180deg,
+            @ms-red 180deg 252deg,
+            @ms-green 252deg 324deg,
+            @ms-white 324deg
+        );
+    }
+}
--- a/less/cost.less
+++ b/less/cost.less
@ -3,7 +3,7 @@
 .@{ms-prefix}-cost {

    // Base cost styles
-    background-color: #BEB9B2;
+    background-color: @ms-base-colorless;
    border-radius: 1em;
    color: #111;
    font-size: 0.95em;
@ -15,23 +15,23 @@
    // Single symbols
    &.@{ms-prefix}-w,
    &.@{ms-prefix}-wp {
-        background-color: #F0F2C0;
+        background-color: @ms-base-white;
    }
    &.@{ms-prefix}-u,
    &.@{ms-prefix}-up {
-        background-color: #B5CDE3;
+        background-color: @ms-base-blue;
    }
    &.@{ms-prefix}-b,
    &.@{ms-prefix}-bp {
-        background-color: #ACA29A;
+        background-color: @ms-base-black;
    }
    &.@{ms-prefix}-r,
    &.@{ms-prefix}-rp {
-        background-color: #DB8664;
+        background-color: @ms-base-red;
    }
    &.@{ms-prefix}-g,
    &.@{ms-prefix}-gp {
-        background-color: #93B483;
+        background-color: @ms-base-green;
    }

    // Split symbols
--- a/less/duo.less
+++ b/less/duo.less
@ -1,3 +1,5 @@
+// dual-layered symbol handling
+
 .@{ms-prefix}-duo {

    // base border styles
@ -24,7 +26,7 @@
    // colorized versions
    &-color {
        &::before {
-            color: #000;
+            color: @ms-border-black;
        }
        &.@{ms-prefix}-multicolor {
            &::after {
--- a/less/mana.less
+++ b/less/mana.less
@ -7,4 +7,5 @@
@import "dfc.less";
@import "sizes.less";
@import "duo.less";
+@import "colors.less";
@import "extras.less";
--- a/less/variables.less
+++ b/less/variables.less
@ -1,11 +1,25 @@
 // base variables
@ms-font-path: '../fonts';
-@ms-version: '1.9.4';
+@ms-version: '1.10.0';
@ms-font-size-base: 14px;
@ms-prefix: ms;
@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;

-// colors
+// mana colors
+@ms-border-black: #010101;
+@ms-base-colorless: #beb9b2;
+@ms-base-white: #f0f2c0;
+@ms-base-blue: #b5cde3;
+@ms-base-black: #aca29a;
+@ms-base-red: #db8664;
+@ms-base-green: #93b483;
+@ms-white: #fff;
+@ms-blue: #3b6ba0;
+@ms-black: #383431;
+@ms-red: #c6553e;
+@ms-green: #3d684b;
+
+// project colors
@ms-multicolor-flat: #cca753;
@ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
@ms-ability-grad: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mana-font",
-  "version": "1.9.4",
+  "version": "1.10.0",
  "description": "Magic: the Gathering mana symbol pictographic font",
  "main": "css/mana.css",
  "repository": {
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@ -0,0 +1,259 @@
+// color indicator circles
+
+.#{$ms-prefix}-ci {
+
+    // base styles
+    border-radius: 100%;
+    box-shadow: inset 0 0 1px #fff; // to remove spill over
+    line-height: 0.95em; // shifts the border up a touch
+    width: 1em;
+    height: 1em;
+
+    // set the border color
+    &::before { color: $ms-border-black; }
+
+    // borders based on number of colors in identity
+    &-1::before { content: "\e98a"; }
+    &-2::before { content: "\e98b"; }
+    &-3::before { content: "\e98c"; }
+    &-4::before { content: "\e98d"; }
+    &-5::before { content: "\e98e"; }
+
+    // 1 color backgrounds
+    &-w { background: $ms-white; }
+    &-u { background: $ms-blue; }
+    &-b { background: $ms-black; }
+    &-r { background: $ms-red; }
+    &-g { background: $ms-green; }
+
+    // 2 color backgrounds
+    &-wu {
+        background: conic-gradient(
+            $ms-white 45deg,
+            $ms-blue 45deg 225deg,
+            $ms-white 225deg
+        );
+    }
+    &-wb {
+        background: conic-gradient(
+            $ms-white 45deg,
+            $ms-black 45deg 225deg,
+            $ms-white 225deg
+        );
+    }
+    &-ub {
+        background: conic-gradient(
+            $ms-blue 45deg,
+            $ms-black 45deg 225deg,
+            $ms-blue 225deg
+        );
+    }
+    &-ur {
+        background: conic-gradient(
+            $ms-blue 45deg,
+            $ms-red 45deg 225deg,
+            $ms-blue 225deg
+        );
+    }
+    &-bg {
+        background: conic-gradient(
+            $ms-black 45deg,
+            $ms-green 45deg 225deg,
+            $ms-black 225deg
+        );
+    }
+    &-br {
+        background: conic-gradient(
+            $ms-black 45deg,
+            $ms-red 45deg 225deg,
+            $ms-black 225deg
+        );
+    }
+    &-rw {
+        background: conic-gradient(
+            $ms-red 45deg,
+            $ms-white 45deg 225deg,
+            $ms-red 225deg
+        );
+    }
+    &-rg {
+        background: conic-gradient(
+            $ms-red 45deg,
+            $ms-green 45deg 225deg,
+            $ms-red 225deg
+        );
+    }
+    &-gu {
+        background: conic-gradient(
+            $ms-green 45deg,
+            $ms-blue 45deg 225deg,
+            $ms-green 225deg
+        );
+    }
+    &-gw {
+        background: conic-gradient(
+            $ms-green 45deg,
+            $ms-white 45deg 225deg,
+            $ms-green 225deg
+        );
+    }
+
+    // 3-color backgrounds
+    &-wug,
+    &-bant {
+        background: conic-gradient(
+            $ms-blue 60deg,
+            $ms-green 60deg 180deg,
+            $ms-white 180deg 300deg,
+            $ms-blue 300deg
+        );
+    }
+    &-ubw,
+    &-esper {
+        background: conic-gradient(
+            $ms-black 60deg,
+            $ms-white 60deg 180deg,
+            $ms-blue 180deg 300deg,
+            $ms-black 300deg
+        );
+    }
+    &-bru,
+    &-grixis {
+        background: conic-gradient(
+            $ms-red 60deg,
+            $ms-blue 60deg 180deg,
+            $ms-black 180deg 300deg,
+            $ms-red 300deg
+        );
+    }
+    &-rgb,
+    &-jund {
+        background: conic-gradient(
+            $ms-green 60deg,
+            $ms-black 60deg 180deg,
+            $ms-red 180deg 300deg,
+            $ms-green 300deg
+        );
+    }
+    &-gwr,
+    &-naya {
+        background: conic-gradient(
+            $ms-white 60deg,
+            $ms-red 60deg 180deg,
+            $ms-green 180deg 300deg,
+            $ms-white 300deg
+        );
+    }
+    &-wbg,
+    &-abzan,
+    &-junk {
+        background: conic-gradient(
+            $ms-black 60deg,
+            $ms-green 60deg 180deg,
+            $ms-white 180deg 300deg,
+            $ms-black 300deg
+        );
+    }
+    &-urw,
+    &-jeskai {
+        background: conic-gradient(
+            $ms-red 60deg,
+            $ms-white 60deg 180deg,
+            $ms-blue 180deg 300deg,
+            $ms-red 300deg
+        );
+    }
+    &-bgu,
+    &-sultai,
+    &-bug {
+        background: conic-gradient(
+            $ms-green 60deg,
+            $ms-blue 60deg 180deg,
+            $ms-black 180deg 300deg,
+            $ms-green 300deg
+        );
+    }
+    &-rwb,
+    &-mardu {
+        background: conic-gradient(
+            $ms-white 60deg,
+            $ms-black 60deg 180deg,
+            $ms-red 180deg 300deg,
+            $ms-white 300deg
+        );
+    }
+    &-gur,
+    &-temur,
+    &-rug {
+        background: conic-gradient(
+            $ms-blue 60deg,
+            $ms-red 60deg 180deg,
+            $ms-green 180deg 300deg,
+            $ms-blue 300deg
+        );
+    }
+
+    // 4 color backgrounds
+    &-ubrg,
+    &-glint {
+        background: conic-gradient(
+            $ms-blue 45deg,
+            $ms-black 45deg 135deg,
+            $ms-red 135deg 225deg,
+            $ms-green 225deg 315deg,
+            $ms-blue 315deg
+        );
+    }
+    &-brgw,
+    &-dune {
+        background: conic-gradient(
+            $ms-black 45deg,
+            $ms-red 45deg 135deg,
+            $ms-green 135deg 225deg,
+            $ms-white 225deg 315deg,
+            $ms-black 315deg
+        );
+    }
+    &-rgwu,
+    &-ink {
+        background: conic-gradient(
+            $ms-red 45deg,
+            $ms-green 45deg 135deg,
+            $ms-white 135deg 225deg,
+            $ms-blue 225deg 315deg,
+            $ms-red 315deg
+        );
+    }
+    &-gwub,
+    &-witch {
+        background: conic-gradient(
+            $ms-green 45deg,
+            $ms-white 45deg 135deg,
+            $ms-blue 135deg 225deg,
+            $ms-black 225deg 315deg,
+            $ms-green 315deg
+        );
+    }
+    &-wubr,
+    &-yore {
+        background: conic-gradient(
+            $ms-white 45deg,
+            $ms-blue 45deg 135deg,
+            $ms-black 135deg 225deg,
+            $ms-red 225deg 315deg,
+            $ms-white 315deg
+        );
+    }
+
+    // 5 color background
+    &-5 {
+        background: conic-gradient(
+            $ms-white 36deg,
+            $ms-blue 36deg 108deg,
+            $ms-black 108deg 180deg,
+            $ms-red 180deg 252deg,
+            $ms-green 252deg 324deg,
+            $ms-white 324deg
+        );
+    }
+}
--- a/sass/_cost.scss
+++ b/sass/_cost.scss
@ -2,7 +2,7 @@

 .#{$ms-prefix}-cost {

-    background-color: #BEB9B2;
+    background-color: $ms-base-colorless;
    border-radius: 1em;
    color: #111;
    font-size: 0.95em;
@ -14,23 +14,23 @@
    // single costs
    &.#{$ms-prefix}-w,
    &.#{$ms-prefix}-wp {
-        background-color: #F0F2C0;
+        background-color: $ms-base-white;
    }
    &.#{$ms-prefix}-u,
    &.#{$ms-prefix}-up {
-        background-color: #B5CDE3;
+        background-color: $ms-base-blue;
    }
    &.#{$ms-prefix}-b,
    &.#{$ms-prefix}-bp {
-        background-color: #ACA29A;
+        background-color: $ms-base-black;
    }
    &.#{$ms-prefix}-r,
    &.#{$ms-prefix}-rp {
-        background-color: #DB8664;
+        background-color: $ms-base-red;
    }
    &.#{$ms-prefix}-g,
    &.#{$ms-prefix}-gp {
-        background-color: #93B483;
+        background-color: $ms-base-green;
    }

    // split costs
--- a/sass/_duo.scss
+++ b/sass/_duo.scss
@ -24,14 +24,14 @@
    // colorized versions
    &-color {
        &::before {
-            color: #000;
+            color: $ms-border-black;
        }
        &.#{$ms-prefix}-multicolor {
            &::after {
-                color: @ms-multicolor-flat;
+                color: $ms-multicolor-flat;
            }
            &.#{$ms-prefix}-grad::after {
-                background: @ms-multicolor-grad;
+                background: $ms-multicolor-grad;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -5,6 +5,20 @@ $ms-font-size-base: 14px !default;
 $ms-prefix: ms !default;
 $ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;

+// mana colors
+$ms-border-black: #010101;
+$ms-base-colorless: #beb9b2;
+$ms-base-white: #f0f2c0;
+$ms-base-blue: #b5cde3;
+$ms-base-black: #aca29a;
+$ms-base-red: #db8664;
+$ms-base-green: #93b483;
+$ms-white: #fff;
+$ms-blue: #3b6ba0;
+$ms-black: #383431;
+$ms-red: #c6553e;
+$ms-green: #3d684b;
+
 // colors
 $ms-multicolor-flat: #cca753;
 $ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
--- a/sass/mana.scss
+++ b/sass/mana.scss
@ -7,4 +7,5 @@
@import "dfc";
@import "sizes";
@import "duo";
+@import "colors";
@import "extras";