Adds new DFC symbols from the Zendikar Rising modal spells in #54, adds multicolor symbol and new dual-layered support #43

2024-11-23 23:34:45 +00:00 · 2020-09-04 09:57:20 -04:00 · 2020-09-04 09:57:20 -04:00 · 624e007781
commit 624e007781
parent 7a528a2b23
21 changed files with 171 additions and 24 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -11,6 +11,11 @@ All notable changes to this project will be documented in this file.

 ## Versions 

+### [1.9.1] 2020-09-04 Modal DFC symbols and Multicolor/duo support
+
+* **Added:** Two new double-faced symbols for `modal-face` and `modal-back` added, from [Zendikar Rising](https://scryfall.com/card/znr/264/riverglide-pathway-lavaglide-pathway) [#54](https://github.com/andrewgioia/mana/issues/54)
+* **Added:** Multicolor symbol with dual-layer support; add `.ms-duo` and the multicolor symbol uses both glyph layers, and adding `.ms-grad` makes it look like the Arena one with a gold gradient background [#43](https://github.com/andrewgioia/mana/issues/43)
+
 ### [1.9.0] 2020-09-03 All Arena ability symbols!

 * **Added:** Excited to add _all_ 53 ability symbols from Arena! This was a big task as many had to be drawn from scratch! [#41](https://github.com/andrewgioia/mana/issues/41), [#53](https://github.com/andrewgioia/mana/issues/53), [#52](https://github.com/andrewgioia/mana/issues/52), and [#44](https://github.com/andrewgioia/mana/issues/44)
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# Mana v1.9.0
+# Mana v1.9.1

 ## The Magic: the Gathering mana symbol font!

@ -16,11 +16,11 @@ $> npm install mana-font

 Bower is still supported but given their notice to migrate away from it I recommend NPM if you're using a package manager. This project is registered as 'mana-font' with [NPM](https://docs.npmjs.com/getting-started/what-is-npm) and `mana` with [Bower](https://bower.io/#getting-started). Just install using the above commands in your project and you can edit anything as needed.

-You can also download the [zip file](https://github.com/andrewgioia/Mana/archive/master.zip) here at Github and use the font files and CSS files in your project as needed.
+You can also download the [zip file](https://github.com/andrewgioia/mana/archive/master.zip) here at Github and use the font files and CSS files in your project as needed.

 ## Using Mana in your project

-Each mana symbol has its own font character. Display them in a manner similar to any icon font, like [Keyrune](http://andrewgioia.github.io/Keyrune), using the `<i class="ms ms-g"></i>` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}).
+Each mana symbol has its own font character. Display them in a manner similar to any icon font, like [Keyrune](https://keyrune.andrewgioia.com), using the `<i class="ms ms-g"></i>` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}).

 To use Mana, move the web font files to your `/fonts` directory and include the `mana.min.css` stylesheet in your `<head>`:

@ -46,9 +46,9 @@ To add new icons, I recommend first creating a project in IcoMoon and uploading

 ## Using Mana in desktop software

-If you'd like to use Mana as a desktop font (e.g., in a Word document) there are a few steps and things to know. First, to get it loaded on your system just download the [latest zip file](https://github.com/andrewgioia/Mana/archive/master.zip), extract it, and navigate to `Mana-master\fonts`. In there, install the `mana.ttf` font (typically by double clicking it).
+If you'd like to use Mana as a desktop font (e.g., in a Word document) there are a few steps and things to know. First, to get it loaded on your system just download the [latest zip file](https://github.com/andrewgioia/mana/archive/master.zip), extract it, and navigate to `mana-master\fonts`. In there, install the `mana.ttf` font (typically by double clicking it).

-Mana uses [private use characters](https://en.wikipedia.org/wiki/Private_Use_Areas) for the font glyphs so you unfortunately can't normally "type" anything in Word to see the symbols. To do so, open up the [Mana Cheatsheet](http://andrewgioia.github.io/Mana/cheatsheet.html) and copy the symbol you want, then paste it into Word (or whatever software you're using).
+Mana uses [private use characters](https://en.wikipedia.org/wiki/Private_Use_Areas) for the font glyphs so you unfortunately can't normally "type" anything in Word to see the symbols. To do so, open up the [Mana Cheatsheet](https://mana.andrewgioia.com/cheatsheet.html) and copy the symbol you want, then paste it into Word (or whatever software you're using).

 ## License

--- a/bower.json
+++ b/bower.json
@ -1,7 +1,7 @@
 {
  "name": "mana",
  "homepage": "https://github.com/andrewgioia/mana",
-  "version": "1.9.0",
+  "version": "1.9.1",
  "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.0');
-  src: url('../fonts/mana.eot?#iefix&v=1.9.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.0') format('woff'), url('../fonts/mana.ttf?v=1.9.0') format('truetype'), url('../fonts/mana.svg?v=1.9.0#mana') format('svg');
+  src: url('../fonts/mana.eot?v=1.9.1');
+  src: url('../fonts/mana.eot?#iefix&v=1.9.1') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.1') format('woff'), url('../fonts/mana.ttf?v=1.9.1') format('truetype'), url('../fonts/mana.svg?v=1.9.1#mana') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@font-face {
  font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.9.0');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.9.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.0') format('woff'), url('../fonts/mplantin.ttf?v=1.9.0') format('truetype'), url('../fonts/mplantin.svg?v=1.9.0#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?v=1.9.1');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.9.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.1') format('woff'), url('../fonts/mplantin.ttf?v=1.9.1') format('truetype'), url('../fonts/mplantin.svg?v=1.9.1#mplantin') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -200,6 +200,9 @@
 .ms-vanguard::before {
  content: "\e971";
 }
+.ms-multicolor::before {
+  content: "\e985";
+}
 .ms-wu::before,
 .ms-wb::before,
 .ms-rw::after,
@ -281,6 +284,12 @@
 .ms-dfc-enchantment::before {
  content: "\e920";
 }
+.ms-dfc-modal-face::before {
+  content: "\e983";
+}
+.ms-dfc-modal-back::before {
+  content: "\e984";
+}
 .ms-flashback::before {
  content: "\e629";
 }
@ -1258,8 +1267,6 @@ span.ms-half > .ms-cost {
 .ms-saga-5::after {
  content: "V";
 }
-/**
- * Double faced cards */
 .ms-dfc {
  color: #111;
  border: 0.05em solid #111;
@ -1283,3 +1290,31 @@ span.ms-half > .ms-cost {
 .ms-6x {
  font-size: 4.5em;
 }
+.ms-duo {
+  color: #fff;
+}
+.ms-duo::after {
+  color: #000;
+  content: '';
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.ms-duo.ms-multicolor::after {
+  content: "\e986";
+}
+.ms-duo-color::before {
+  color: #000;
+}
+.ms-duo-color.ms-multicolor::after {
+  color: #cca753;
+}
+.ms-duo-color.ms-multicolor.ms-grad::after {
+  background: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
--- 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
@ -185,4 +185,8 @@
 <glyph unicode="&#xe980;" glyph-name="ability-mutate" horiz-adv-x="840" d="M391.718 555.841v-175.846l-109.754 30.432 109.754 145.414zM418.486 554.749v-174.526l102.614 30.204-102.614 144.322zM421.162 893.813c-232.526-2.944-420.246-187.15-421.162-421.162 1.082-44.090 7.428-87.972 21.508-129.89 18.528 161.728 187.042 286.876 349.686 286.932-0.918 0.744-1.874 1.474-2.868 2.192-25.862 18.692-73.638 31.732-107.688 34.184-1.010 0.074-1.982 0.306-2.94 0.448-4.12 0.588-1.952-0.078 3.166 1.232 16.396 4.192 45.788 6.272 65.298 5.232 154.848-8.258 271.080-126.066 271.080-275.878-0.618-47.302-12.518-93.696-36.882-134.454l-6.75-127.146c58.548 60.912 95.942 153.542 108.166 235.908 3.22-16.606 3.536-33.596 3.874-50.45-1.79-88.806-32.788-180.996-105.29-236.718v-0.858c138.978 66.61 226.29 195.542 227.238 351.194-2.126 130.866-64.712 251.234-175.426 322.904l-0.11 0.972c105.84-47.464 188.544-132.842 227.938-242.592-24.044 211.622-196.286 369.788-408.798 377.802l-10.040 0.148zM281.964 376.283l30.466-380.118 79.288-36.644v380.080l-109.754 36.682zM521.1 376.283l-102.614-36.406v-380.27l78.008 36.558 24.606 380.118zM299.58 574.961c-93.272-28.998-150.418-101.558-152.796-199.948 1.946-76.978 40.706-146.184 109.65-182.642l-6.876 128.826c-15.884 29.244-23.322 62.468-23.566 95.628 1.542 60.948 25.628 119.028 73.588 158.136zM138.938 232.527c14.808-60.89 61.966-113.39 124.732-134.85l-4.39 66.062c-51.136 11.146-87.074 29.88-120.342 68.788z" />
 <glyph unicode="&#xe981;" glyph-name="ability-proliferate" horiz-adv-x="472" d="M457.786 268.181c9.742-22.98 13.512-47.402 14.214-72.174 0-116.42-105.66-210.796-236-210.796s-236 94.376-236 210.796c0.018 17.804 2.518 35.558 7.43 52.68 1.898 6.614 4.522 12.996 6.784 19.494 39.9-89.9 125.546-136.448 221.786-138.62 78.484 0.506 156.968 35.494 201.834 101.49 10.33 15.196 12.13 20.538 19.952 37.13zM457.786 508.763c-7.822-16.592-9.622-21.934-19.952-37.13-44.866-65.996-123.35-100.982-201.834-101.49-96.24 2.174-181.886 48.72-221.786 138.62-2.262-6.496-4.886-12.88-6.784-19.492-4.912-17.122-7.412-34.878-7.43-52.682 0-116.42 105.66-210.796 236-210.796s236 94.376 236 210.796c-0.702 24.772-4.472 49.194-14.214 72.174zM236 868.123c-7.434-0.32-15.56-1.658-20.658-7.65h-0.038l-0.028-0.076-0.178-0.2 0.102 0.002c-3.746-9.974-8.088-19.686-12.782-29.252-42.030-89.62-117.45-113.538-197.872-118.886-2.356-20.762-1.784-11.41-2.254-28.016 6.958-126.6 111.008-208.15 233.708-210.744v0l11.274 0.374c19.712 1.91 24.778 1.768 44.098 6.156 97.36 22.114 175.332 101.802 178.336 204.214-0.47 16.606 0.102 7.254-2.254 28.016-80.422 5.348-155.842 29.266-197.872 118.886-4.572 9.752-9.422 19.34-12.886 29.526l-0.104 0.128c-3.576 4.44-11.452 7.522-20.592 7.522z" />
 <glyph unicode="&#xe982;" glyph-name="ability-prowess" horiz-adv-x="680" d="M358.41 854.033v0c13.034-0.42 21.454 0.842 39.114-5.044 19.794-6.598 25.178-38.64 26.548-60.844l1.092-21.066v-230.472c-0.522-45.444-0.482-59.258 0-66.34s1.424-9.73 1.424-9.73c1.58-4.308 1.958-5.99 6.144-6.412 6.388 0 11.566 5.178 11.566 11.566v174.218c0.36 13.204 0.5 19.264 2.86 32.254 7.036 38.734 95.294 51.412 102.074-13.666 2.702-25.942 2.060-49.77 3.154-75.69 0.696-16.504-0.166-38.586 0.782-55.078v-69.604c0-6.388 2.368-11.566 7.758-11.566s9.748 5.178 9.76 11.566c0.242 125.548 1.062 141.488 1.928 148.924 6.506 55.906 104.154 56.146 105.674-22.392 2.028-104.764-0.782-209.726 1.65-314.36 0.63-35.516-3.564-70.918-12.416-105.312-1.418-5.512-3.516-10.826-5.276-16.238l0.564-1.3c-4.68-23.334-18.786-43.424-31.716-62.844-8.188-13.636-19.38-24.87-31.398-35.094l-0.654-0.614 0.004 0.062c-11.042-10.508-24.476-17.94-37.758-25.188 1.368 68.742 7.604 137.18 9.43 205.77-48.516 41.214-99.768 78.932-151.934 115.28 4.106 28.592 8.518 57.336 15.21 85.472-49.428-42.584-97.944-85.928-145.698-130.49 34.068-40.15 75.13-73.152 117.866-103.568-28.288-65.398-55.36-131.098-82.278-196.95-32.3 2.316-61.184 17.26-88.402 33.7l-1.534 0.654c-12.040 7.26-6.548 3.668-16.576 10.622l-5.514 3.582v0.242c-40.592 28.14-70.712 68.17-99.196 107.848-39.086 58.4-85.014 113.758-110.108 180.218-14.904 47.908 38.324 93.838 84.71 83.952 36.348-25.702 51.622-53.658 84.168-83.618 8.822 152.998-7.212 296.84-0.216 449.686-1.978 61.29 110.886 68.662 114.564 10.798 1.836-29.736 2.584-59.524 3.33-89.302v-252.19c0-6.388 1.178-11.568 7.566-11.568s11.568 5.18 11.568 11.568v117.532c1.774 57.722 0.924 17.81 0.22 113.31-0.092 12.402-0.148 24.804-0.22 37.208v34.444c0.928 44.16 0.21 24.404 1.812 59.274 1.682 30.274 35.32 37.212 48.354 36.79z" />
+<glyph unicode="&#xe983;" glyph-name="dfc-modal-face" d="M581.116 630.096l4.054-0.198c9.938-1.334 17.286-6.524 23.25-14.32l167.868-290.732-0.068-0.072c3.454-5.898 5.462-12.032 5.414-18.486-0.152-19.674-14.282-33.104-32.468-33.104l-0.014 0.002-336.192-0.002c-18.184 0-32.926 14.742-32.926 32.928 0.356 9.54 3.526 14.122 5.938 18.72 54.736 96.312 111.762 191.17 165.984 287.644 5.426 8.82 13.944 17.412 29.16 17.62zM595.098 778.868c183.784-2.244 340.998-142.89 341.982-330.868-2.456-187.11-157.39-330.282-342.42-330.874-85.128 3.020-171.446 28.15-234.018 88.532l-269.498 246.944 255.416 225.62 24.5 18.46c62.986 53.108 141.61 80.656 224.038 82.186zM593.948 862.882c-103.536-2.542-199.596-35.176-277.754-102.594l-288.148-251.342c-32.022-29.152-33.654-77.998-3.644-109.102l277.712-254.442c76.23-74.042 185.64-110.762 291.834-112.284 235.898 0 427.132 185.748 427.132 414.882s-191.234 414.882-427.132 414.882z" />
+<glyph unicode="&#xe984;" glyph-name="dfc-modal-back" d="M593.948 862.882c235.898 0 427.132-185.748 427.132-414.882s-191.234-414.882-427.132-414.882c-106.194 1.522-215.604 38.242-291.834 112.284l-277.712 254.442c-30.010 31.104-28.378 79.95 3.644 109.102l288.148 251.342c78.158 67.418 174.218 100.052 277.754 102.594zM595.098 778.868c-82.428-1.53-161.052-29.078-224.038-82.186l-24.5-18.46-255.416-225.62 269.498-246.944c62.572-60.382 148.89-85.512 234.018-88.532 185.030 0.592 339.964 143.764 342.42 330.874-0.984 187.978-158.198 328.624-341.982 330.868zM451.622 595.736c-12.702-0.174-19.812-7.346-24.344-14.708-45.264-80.536-92.868-159.724-138.562-240.124-2.012-3.84-4.658-7.664-4.956-15.628 0-15.182 12.306-27.488 27.486-27.488l0.012 0.002 280.652-0.002c15.182 0 26.978 11.212 27.104 27.636 0.040 5.386-1.636 10.508-4.52 15.432l0.058 0.058-140.136 242.704c-4.978 6.508-11.114 10.838-19.41 11.952l-3.384 0.166zM703.832 299.026c-12.702 0.174-19.812 7.346-24.344 14.708-45.264 80.536-92.868 159.724-138.562 240.126-2.014 3.838-4.658 7.662-4.956 15.626 0 15.182 12.306 27.488 27.486 27.488l0.012-0.002 280.652 0.002c15.182 0 26.978-11.212 27.104-27.636 0.040-5.386-1.638-10.508-4.52-15.432l0.056-0.058-140.134-242.704c-4.978-6.508-11.114-10.838-19.41-11.952l-3.384-0.166z" />
+<glyph unicode="&#xe985;" glyph-name="multicolor" horiz-adv-x="880" d="M439.19 785.844c186.14 0 337.036-150.896 337.036-337.034 0-186.14-150.896-337.036-337.036-337.036-186.138 0-337.034 150.896-337.034 337.036 0 186.138 150.896 337.034 337.034 337.034zM439.19 691.386c-133.97 0-242.576-108.606-242.576-242.576 0-133.972 108.606-242.578 242.576-242.578 133.972 0 242.578 108.606 242.578 242.578 0 133.97-108.606 242.576-242.578 242.576z" />
+<glyph unicode="&#xe986;" glyph-name="multicolor-border" horiz-adv-x="880" d="M440 888c243.006 0 440-196.994 440-440s-196.994-440-440-440c-243.006 0-440 196.994-440 440s196.994 440 440 440zM439.19 785.844v0c-186.138 0-337.034-150.896-337.034-337.034 0-186.14 150.896-337.036 337.034-337.036 186.14 0 337.036 150.896 337.036 337.036 0 186.138-150.896 337.034-337.036 337.034zM439.19 691.386c133.972 0 242.578-108.606 242.578-242.576 0-133.972-108.606-242.578-242.578-242.578-133.97 0-242.576 108.606-242.576 242.578 0 133.97 108.606 242.576 242.576 242.576z" />
 </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
@ -198,7 +198,8 @@
            <i class="ms ms-phenomenon ms-2x" title="Phenomenon"></i>
            <i class="ms ms-scheme ms-2x" title="Scheme"></i>
            <i class="ms ms-conspiracy ms-2x" title="Conspiracy"></i>
-            &nbsp;&nbsp;
+            <br />
+            <i class="ms ms-multicolor ms-duo ms-duo-color ms-grad ms-2x" title="Multicolor"></i>
            <i class="ms ms-token ms-2x" title="Token"></i>
            <i class="ms ms-flashback ms-2x" title="Flashback"></i>
            <i class="ms ms-rarity ms-2x" title="Rarity"></i>
@ -225,6 +226,9 @@
            <i class="ms ms-dfc ms-dfc-moon ms-2x"></i>
            <i class="ms ms-dfc ms-dfc-emrakul ms-2x"></i>
            <i class="ms ms-dfc ms-dfc-enchantment ms-2x"></i>
+            &nbsp;&nbsp;
+            <i class="ms ms-dfc-modal-face ms-2x"></i>
+            <i class="ms ms-dfc-modal-back ms-2x"></i>
        </p>
        <h3>Guild Symbols</h3>
        <p>
--- a/less/dfc.less
+++ b/less/dfc.less
@ -1,9 +1,8 @@
-/**
- * Double faced cards */
+// double faced cards

 .@{ms-prefix}-dfc {
    color: #111;
    border: .05em solid #111;
    border-radius: 2em;
    padding: 0.025em;
-}
+}
--- a/less/duo.less
+++ b/less/duo.less
@ -0,0 +1,41 @@
+.@{ms-prefix}-duo {
+
+    // base border styles
+    &::after {
+        color: #000;
+        content: '';
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    // set default inner to black unless we're adding color to the background
+    color: #fff;
+
+    // multicolor symbol
+    &.@{ms-prefix}-multicolor::after {
+        content: "\e986";
+    }
+
+    // colorized versions
+    &-color {
+        &::before {
+            color: #000;
+        }
+        &.@{ms-prefix}-multicolor {
+            &::after {
+                color: @ms-multicolor-flat;
+            }
+            &.@{ms-prefix}-grad::after {
+                background: @ms-multicolor-grad;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+
+}
--- a/less/icons.less
+++ b/less/icons.less
@ -70,6 +70,7 @@
    &-tribal::before,
        &-multiple::before { content: "\e925"; }
    &-vanguard::before { content: "\e971"; }
+    &-multicolor::before { content: "\e985"; }

    // splits
    &-wu::before,
@ -124,6 +125,8 @@
        &-emrakul::before { content: "\e90a"; }
        &-moon::before { content: "\e90b"; }
        &-enchantment::before { content: "\e920"; }
+        &-modal-face::before { content: "\e983"; }
+        &-modal-back::before { content: "\e984"; }
    }

    // other card elements
--- a/less/mana.less
+++ b/less/mana.less
@ -5,4 +5,5 @@
@import "cost.less";
@import "loyalty.less";
@import "dfc.less";
-@import "sizes.less";
+@import "sizes.less";
+@import "duo.less";
--- a/less/variables.less
+++ b/less/variables.less
@ -1,5 +1,10 @@
+// base variables
@ms-font-path: '../fonts';
-@ms-version: '1.9.0';
+@ms-version: '1.9.1';
@ms-font-size-base: 14px;
@ms-prefix: ms;
-@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
+@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
+
+// colors
+@ms-multicolor-flat: #cca753;
+@ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "mana-font",
-  "version": "1.9.0",
+  "version": "1.9.1",
  "description": "Magic: the Gathering mana symbol pictographic font",
  "main": "css/mana.css",
  "repository": {
--- a/sass/_duo.scss
+++ b/sass/_duo.scss
@ -0,0 +1,41 @@
+.#{$ms-prefix}-duo {
+
+    // base border styles
+    &::after {
+        color: #000;
+        content: '';
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    // set default inner to black unless we're adding color to the background
+    color: #fff;
+
+    // multicolor symbol
+    &.#{$ms-prefix}-multicolor::after {
+        content: "\e986";
+    }
+
+    // colorized versions
+    &-color {
+        &::before {
+            color: #000;
+        }
+        &.#{$ms-prefix}-multicolor {
+            &::after {
+                color: @ms-multicolor-flat;
+            }
+            &.#{$ms-prefix}-grad::after {
+                background: @ms-multicolor-grad;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+
+}
--- a/sass/_icons.scss
+++ b/sass/_icons.scss
@ -70,6 +70,7 @@
    &-tribal::before,
        &-multiple::before { content: "\e925"; }
    &-vanguard::before { content: "\e971"; }
+    &-multicolor::before { content: "\e985"; }

    // splits
    &-wu::before,
@ -124,6 +125,8 @@
        &-emrakul::before { content: "\e90a"; }
        &-moon::before { content: "\e90b"; }
        &-enchantment::before { content: "\e920"; }
+        &-modal-face::before { content: "\e983"; }
+        &-modal-back::before { content: "\e984"; }
    }

    // other card elements
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -1,5 +1,10 @@
+// base variables
 $ms-font-path: '../fonts' !default;
-$ms-version: '1.9.0' !default;
+$ms-version: '1.9.1' !default;
 $ms-font-size-base: 14px !default;
 $ms-prefix: ms !default;
-$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;
+$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;
+
+// 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
@ -5,4 +5,5 @@
@import "cost";
@import "loyalty";
@import "dfc";
-@import "sizes";
+@import "sizes";
+@import "duo";