npm - @sage/design-tokens - Versions diffs - 2.56.0 → 2.57.0 - Mend

@sage/design-tokens 2.56.0 → 2.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/android/base.xml +1 -1
package/android/origin.xml +97 -97
package/css/base.css +1 -1
package/css/origin.css +97 -97
package/data/tokens.json +1 -1
package/docs/tokens/base/border-radius/index.html +2 -2
package/docs/tokens/base/border-width/index.html +2 -2
package/docs/tokens/base/box-shadow/index.html +2 -2
package/docs/tokens/base/colors/index.html +2 -2
package/docs/tokens/base/font-families/index.html +2 -2
package/docs/tokens/base/font-sizes/index.html +2 -2
package/docs/tokens/base/font-weights/index.html +2 -2
package/docs/tokens/base/index.html +2 -2
package/docs/tokens/base/line-heights/index.html +2 -2
package/docs/tokens/base/opacity/index.html +2 -2
package/docs/tokens/base/sizing/index.html +2 -2
package/docs/tokens/base/spacing/index.html +2 -2
package/docs/tokens/base/typography/index.html +2 -2
package/docs/tokens/index.html +389 -389
package/docs/tokens/origin/{origin → colors}/index.html +388 -388
package/docs/tokens/origin/index.html +387 -387
package/ios/base.h +1 -1
package/ios/origin.h +97 -97
package/js/base/common.js +1 -1
package/js/origin/common.d.ts +96 -96
package/js/origin/common.js +97 -97
package/js/origin/es6.d.ts +96 -96
package/js/origin/es6.js +96 -96
package/package.json +1 -5
package/sage-design-tokens-2.57.0.tgz +0 -0
package/scss/base.scss +1 -1
package/scss/origin.scss +97 -97
package/sage-design-tokens-2.56.0.tgz +0 -0

package/docs/tokens/origin/index.html CHANGED Viewed

@@ -263,8 +263,8 @@
                 </p>
                 <ul class="menu-list">
                         <li>
-                            <a href="../origin/origin/index.html">
-                                origin
+                            <a href="../origin/colors/index.html">
+                                colors
                             </a>
                         </li>
                 </ul>
@@ -279,7 +279,7 @@
             origin
         </h1>
             <section class="my-6">
-                <h2 class="hide-on-embedded">origin</h2>
+                <h2 class="hide-on-embedded">colors</h2>
                 <table class="table is-bordered is-hoverable is-fullwidth">
                   <colgroup>
                     <col width="50%">
@@ -295,10 +295,10 @@
                   </thead>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade100"
-                                title="theme: origin; category: origin; name: jade; variant: 100; ">
-                                originJade100
-                                <a href="#origin-originJade100"
+                                id="origin-colorsJade100"
+                                title="theme: origin; category: colors; name: jade; variant: 100; ">
+                                colorsJade100
+                                <a href="#origin-colorsJade100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -316,10 +316,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade200"
-                                title="theme: origin; category: origin; name: jade; variant: 200; ">
-                                originJade200
-                                <a href="#origin-originJade200"
+                                id="origin-colorsJade200"
+                                title="theme: origin; category: colors; name: jade; variant: 200; ">
+                                colorsJade200
+                                <a href="#origin-colorsJade200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -337,10 +337,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade300"
-                                title="theme: origin; category: origin; name: jade; variant: 300; ">
-                                originJade300
-                                <a href="#origin-originJade300"
+                                id="origin-colorsJade300"
+                                title="theme: origin; category: colors; name: jade; variant: 300; ">
+                                colorsJade300
+                                <a href="#origin-colorsJade300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -358,10 +358,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade400"
-                                title="theme: origin; category: origin; name: jade; variant: 400; ">
-                                originJade400
-                                <a href="#origin-originJade400"
+                                id="origin-colorsJade400"
+                                title="theme: origin; category: colors; name: jade; variant: 400; ">
+                                colorsJade400
+                                <a href="#origin-colorsJade400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -379,10 +379,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade500"
-                                title="theme: origin; category: origin; name: jade; variant: 500; ">
-                                originJade500
-                                <a href="#origin-originJade500"
+                                id="origin-colorsJade500"
+                                title="theme: origin; category: colors; name: jade; variant: 500; ">
+                                colorsJade500
+                                <a href="#origin-colorsJade500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -400,10 +400,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade600"
-                                title="theme: origin; category: origin; name: jade; variant: 600; ">
-                                originJade600
-                                <a href="#origin-originJade600"
+                                id="origin-colorsJade600"
+                                title="theme: origin; category: colors; name: jade; variant: 600; ">
+                                colorsJade600
+                                <a href="#origin-colorsJade600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -421,10 +421,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade700"
-                                title="theme: origin; category: origin; name: jade; variant: 700; ">
-                                originJade700
-                                <a href="#origin-originJade700"
+                                id="origin-colorsJade700"
+                                title="theme: origin; category: colors; name: jade; variant: 700; ">
+                                colorsJade700
+                                <a href="#origin-colorsJade700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -442,10 +442,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade800"
-                                title="theme: origin; category: origin; name: jade; variant: 800; ">
-                                originJade800
-                                <a href="#origin-originJade800"
+                                id="origin-colorsJade800"
+                                title="theme: origin; category: colors; name: jade; variant: 800; ">
+                                colorsJade800
+                                <a href="#origin-colorsJade800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -463,10 +463,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade900"
-                                title="theme: origin; category: origin; name: jade; variant: 900; ">
-                                originJade900
-                                <a href="#origin-originJade900"
+                                id="origin-colorsJade900"
+                                title="theme: origin; category: colors; name: jade; variant: 900; ">
+                                colorsJade900
+                                <a href="#origin-colorsJade900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -484,10 +484,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade010"
-                                title="theme: origin; category: origin; name: jade; variant: 010; ">
-                                originJade010
-                                <a href="#origin-originJade010"
+                                id="origin-colorsJade010"
+                                title="theme: origin; category: colors; name: jade; variant: 010; ">
+                                colorsJade010
+                                <a href="#origin-colorsJade010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -505,10 +505,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originJade050"
-                                title="theme: origin; category: origin; name: jade; variant: 050; ">
-                                originJade050
-                                <a href="#origin-originJade050"
+                                id="origin-colorsJade050"
+                                title="theme: origin; category: colors; name: jade; variant: 050; ">
+                                colorsJade050
+                                <a href="#origin-colorsJade050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -526,10 +526,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy100"
-                                title="theme: origin; category: origin; name: navy; variant: 100; ">
-                                originNavy100
-                                <a href="#origin-originNavy100"
+                                id="origin-colorsNavy100"
+                                title="theme: origin; category: colors; name: navy; variant: 100; ">
+                                colorsNavy100
+                                <a href="#origin-colorsNavy100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -547,10 +547,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy200"
-                                title="theme: origin; category: origin; name: navy; variant: 200; ">
-                                originNavy200
-                                <a href="#origin-originNavy200"
+                                id="origin-colorsNavy200"
+                                title="theme: origin; category: colors; name: navy; variant: 200; ">
+                                colorsNavy200
+                                <a href="#origin-colorsNavy200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -568,10 +568,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy300"
-                                title="theme: origin; category: origin; name: navy; variant: 300; ">
-                                originNavy300
-                                <a href="#origin-originNavy300"
+                                id="origin-colorsNavy300"
+                                title="theme: origin; category: colors; name: navy; variant: 300; ">
+                                colorsNavy300
+                                <a href="#origin-colorsNavy300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -589,10 +589,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy400"
-                                title="theme: origin; category: origin; name: navy; variant: 400; ">
-                                originNavy400
-                                <a href="#origin-originNavy400"
+                                id="origin-colorsNavy400"
+                                title="theme: origin; category: colors; name: navy; variant: 400; ">
+                                colorsNavy400
+                                <a href="#origin-colorsNavy400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -610,10 +610,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy500"
-                                title="theme: origin; category: origin; name: navy; variant: 500; ">
-                                originNavy500
-                                <a href="#origin-originNavy500"
+                                id="origin-colorsNavy500"
+                                title="theme: origin; category: colors; name: navy; variant: 500; ">
+                                colorsNavy500
+                                <a href="#origin-colorsNavy500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -631,10 +631,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy600"
-                                title="theme: origin; category: origin; name: navy; variant: 600; ">
-                                originNavy600
-                                <a href="#origin-originNavy600"
+                                id="origin-colorsNavy600"
+                                title="theme: origin; category: colors; name: navy; variant: 600; ">
+                                colorsNavy600
+                                <a href="#origin-colorsNavy600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -652,10 +652,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy700"
-                                title="theme: origin; category: origin; name: navy; variant: 700; ">
-                                originNavy700
-                                <a href="#origin-originNavy700"
+                                id="origin-colorsNavy700"
+                                title="theme: origin; category: colors; name: navy; variant: 700; ">
+                                colorsNavy700
+                                <a href="#origin-colorsNavy700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -673,10 +673,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy800"
-                                title="theme: origin; category: origin; name: navy; variant: 800; ">
-                                originNavy800
-                                <a href="#origin-originNavy800"
+                                id="origin-colorsNavy800"
+                                title="theme: origin; category: colors; name: navy; variant: 800; ">
+                                colorsNavy800
+                                <a href="#origin-colorsNavy800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -694,10 +694,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy900"
-                                title="theme: origin; category: origin; name: navy; variant: 900; ">
-                                originNavy900
-                                <a href="#origin-originNavy900"
+                                id="origin-colorsNavy900"
+                                title="theme: origin; category: colors; name: navy; variant: 900; ">
+                                colorsNavy900
+                                <a href="#origin-colorsNavy900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -715,10 +715,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy010"
-                                title="theme: origin; category: origin; name: navy; variant: 010; ">
-                                originNavy010
-                                <a href="#origin-originNavy010"
+                                id="origin-colorsNavy010"
+                                title="theme: origin; category: colors; name: navy; variant: 010; ">
+                                colorsNavy010
+                                <a href="#origin-colorsNavy010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -736,10 +736,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originNavy050"
-                                title="theme: origin; category: origin; name: navy; variant: 050; ">
-                                originNavy050
-                                <a href="#origin-originNavy050"
+                                id="origin-colorsNavy050"
+                                title="theme: origin; category: colors; name: navy; variant: 050; ">
+                                colorsNavy050
+                                <a href="#origin-colorsNavy050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -757,10 +757,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal100"
-                                title="theme: origin; category: origin; name: teal; variant: 100; ">
-                                originTeal100
-                                <a href="#origin-originTeal100"
+                                id="origin-colorsTeal100"
+                                title="theme: origin; category: colors; name: teal; variant: 100; ">
+                                colorsTeal100
+                                <a href="#origin-colorsTeal100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -778,10 +778,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal200"
-                                title="theme: origin; category: origin; name: teal; variant: 200; ">
-                                originTeal200
-                                <a href="#origin-originTeal200"
+                                id="origin-colorsTeal200"
+                                title="theme: origin; category: colors; name: teal; variant: 200; ">
+                                colorsTeal200
+                                <a href="#origin-colorsTeal200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -799,10 +799,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal300"
-                                title="theme: origin; category: origin; name: teal; variant: 300; ">
-                                originTeal300
-                                <a href="#origin-originTeal300"
+                                id="origin-colorsTeal300"
+                                title="theme: origin; category: colors; name: teal; variant: 300; ">
+                                colorsTeal300
+                                <a href="#origin-colorsTeal300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -820,10 +820,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal400"
-                                title="theme: origin; category: origin; name: teal; variant: 400; ">
-                                originTeal400
-                                <a href="#origin-originTeal400"
+                                id="origin-colorsTeal400"
+                                title="theme: origin; category: colors; name: teal; variant: 400; ">
+                                colorsTeal400
+                                <a href="#origin-colorsTeal400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -841,10 +841,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal500"
-                                title="theme: origin; category: origin; name: teal; variant: 500; ">
-                                originTeal500
-                                <a href="#origin-originTeal500"
+                                id="origin-colorsTeal500"
+                                title="theme: origin; category: colors; name: teal; variant: 500; ">
+                                colorsTeal500
+                                <a href="#origin-colorsTeal500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -862,10 +862,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal600"
-                                title="theme: origin; category: origin; name: teal; variant: 600; ">
-                                originTeal600
-                                <a href="#origin-originTeal600"
+                                id="origin-colorsTeal600"
+                                title="theme: origin; category: colors; name: teal; variant: 600; ">
+                                colorsTeal600
+                                <a href="#origin-colorsTeal600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -883,10 +883,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal700"
-                                title="theme: origin; category: origin; name: teal; variant: 700; ">
-                                originTeal700
-                                <a href="#origin-originTeal700"
+                                id="origin-colorsTeal700"
+                                title="theme: origin; category: colors; name: teal; variant: 700; ">
+                                colorsTeal700
+                                <a href="#origin-colorsTeal700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -904,10 +904,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal800"
-                                title="theme: origin; category: origin; name: teal; variant: 800; ">
-                                originTeal800
-                                <a href="#origin-originTeal800"
+                                id="origin-colorsTeal800"
+                                title="theme: origin; category: colors; name: teal; variant: 800; ">
+                                colorsTeal800
+                                <a href="#origin-colorsTeal800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -925,10 +925,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal900"
-                                title="theme: origin; category: origin; name: teal; variant: 900; ">
-                                originTeal900
-                                <a href="#origin-originTeal900"
+                                id="origin-colorsTeal900"
+                                title="theme: origin; category: colors; name: teal; variant: 900; ">
+                                colorsTeal900
+                                <a href="#origin-colorsTeal900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -946,10 +946,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal010"
-                                title="theme: origin; category: origin; name: teal; variant: 010; ">
-                                originTeal010
-                                <a href="#origin-originTeal010"
+                                id="origin-colorsTeal010"
+                                title="theme: origin; category: colors; name: teal; variant: 010; ">
+                                colorsTeal010
+                                <a href="#origin-colorsTeal010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -967,10 +967,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTeal050"
-                                title="theme: origin; category: origin; name: teal; variant: 050; ">
-                                originTeal050
-                                <a href="#origin-originTeal050"
+                                id="origin-colorsTeal050"
+                                title="theme: origin; category: colors; name: teal; variant: 050; ">
+                                colorsTeal050
+                                <a href="#origin-colorsTeal050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -988,10 +988,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry100"
-                                title="theme: origin; category: origin; name: cherry; variant: 100; ">
-                                originCherry100
-                                <a href="#origin-originCherry100"
+                                id="origin-colorsCherry100"
+                                title="theme: origin; category: colors; name: cherry; variant: 100; ">
+                                colorsCherry100
+                                <a href="#origin-colorsCherry100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1009,10 +1009,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry200"
-                                title="theme: origin; category: origin; name: cherry; variant: 200; ">
-                                originCherry200
-                                <a href="#origin-originCherry200"
+                                id="origin-colorsCherry200"
+                                title="theme: origin; category: colors; name: cherry; variant: 200; ">
+                                colorsCherry200
+                                <a href="#origin-colorsCherry200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1030,10 +1030,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry300"
-                                title="theme: origin; category: origin; name: cherry; variant: 300; ">
-                                originCherry300
-                                <a href="#origin-originCherry300"
+                                id="origin-colorsCherry300"
+                                title="theme: origin; category: colors; name: cherry; variant: 300; ">
+                                colorsCherry300
+                                <a href="#origin-colorsCherry300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1051,10 +1051,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry400"
-                                title="theme: origin; category: origin; name: cherry; variant: 400; ">
-                                originCherry400
-                                <a href="#origin-originCherry400"
+                                id="origin-colorsCherry400"
+                                title="theme: origin; category: colors; name: cherry; variant: 400; ">
+                                colorsCherry400
+                                <a href="#origin-colorsCherry400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1072,10 +1072,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry500"
-                                title="theme: origin; category: origin; name: cherry; variant: 500; ">
-                                originCherry500
-                                <a href="#origin-originCherry500"
+                                id="origin-colorsCherry500"
+                                title="theme: origin; category: colors; name: cherry; variant: 500; ">
+                                colorsCherry500
+                                <a href="#origin-colorsCherry500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1093,10 +1093,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry600"
-                                title="theme: origin; category: origin; name: cherry; variant: 600; ">
-                                originCherry600
-                                <a href="#origin-originCherry600"
+                                id="origin-colorsCherry600"
+                                title="theme: origin; category: colors; name: cherry; variant: 600; ">
+                                colorsCherry600
+                                <a href="#origin-colorsCherry600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1114,10 +1114,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry700"
-                                title="theme: origin; category: origin; name: cherry; variant: 700; ">
-                                originCherry700
-                                <a href="#origin-originCherry700"
+                                id="origin-colorsCherry700"
+                                title="theme: origin; category: colors; name: cherry; variant: 700; ">
+                                colorsCherry700
+                                <a href="#origin-colorsCherry700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1135,10 +1135,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry800"
-                                title="theme: origin; category: origin; name: cherry; variant: 800; ">
-                                originCherry800
-                                <a href="#origin-originCherry800"
+                                id="origin-colorsCherry800"
+                                title="theme: origin; category: colors; name: cherry; variant: 800; ">
+                                colorsCherry800
+                                <a href="#origin-colorsCherry800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1156,10 +1156,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry900"
-                                title="theme: origin; category: origin; name: cherry; variant: 900; ">
-                                originCherry900
-                                <a href="#origin-originCherry900"
+                                id="origin-colorsCherry900"
+                                title="theme: origin; category: colors; name: cherry; variant: 900; ">
+                                colorsCherry900
+                                <a href="#origin-colorsCherry900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1177,10 +1177,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry010"
-                                title="theme: origin; category: origin; name: cherry; variant: 010; ">
-                                originCherry010
-                                <a href="#origin-originCherry010"
+                                id="origin-colorsCherry010"
+                                title="theme: origin; category: colors; name: cherry; variant: 010; ">
+                                colorsCherry010
+                                <a href="#origin-colorsCherry010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1198,10 +1198,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originCherry050"
-                                title="theme: origin; category: origin; name: cherry; variant: 050; ">
-                                originCherry050
-                                <a href="#origin-originCherry050"
+                                id="origin-colorsCherry050"
+                                title="theme: origin; category: colors; name: cherry; variant: 050; ">
+                                colorsCherry050
+                                <a href="#origin-colorsCherry050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1219,10 +1219,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra100"
-                                title="theme: origin; category: origin; name: terra; variant: 100; ">
-                                originTerra100
-                                <a href="#origin-originTerra100"
+                                id="origin-colorsTerra100"
+                                title="theme: origin; category: colors; name: terra; variant: 100; ">
+                                colorsTerra100
+                                <a href="#origin-colorsTerra100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1240,10 +1240,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra200"
-                                title="theme: origin; category: origin; name: terra; variant: 200; ">
-                                originTerra200
-                                <a href="#origin-originTerra200"
+                                id="origin-colorsTerra200"
+                                title="theme: origin; category: colors; name: terra; variant: 200; ">
+                                colorsTerra200
+                                <a href="#origin-colorsTerra200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1261,10 +1261,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra300"
-                                title="theme: origin; category: origin; name: terra; variant: 300; ">
-                                originTerra300
-                                <a href="#origin-originTerra300"
+                                id="origin-colorsTerra300"
+                                title="theme: origin; category: colors; name: terra; variant: 300; ">
+                                colorsTerra300
+                                <a href="#origin-colorsTerra300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1282,10 +1282,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra400"
-                                title="theme: origin; category: origin; name: terra; variant: 400; ">
-                                originTerra400
-                                <a href="#origin-originTerra400"
+                                id="origin-colorsTerra400"
+                                title="theme: origin; category: colors; name: terra; variant: 400; ">
+                                colorsTerra400
+                                <a href="#origin-colorsTerra400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1303,10 +1303,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra500"
-                                title="theme: origin; category: origin; name: terra; variant: 500; ">
-                                originTerra500
-                                <a href="#origin-originTerra500"
+                                id="origin-colorsTerra500"
+                                title="theme: origin; category: colors; name: terra; variant: 500; ">
+                                colorsTerra500
+                                <a href="#origin-colorsTerra500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1324,10 +1324,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra600"
-                                title="theme: origin; category: origin; name: terra; variant: 600; ">
-                                originTerra600
-                                <a href="#origin-originTerra600"
+                                id="origin-colorsTerra600"
+                                title="theme: origin; category: colors; name: terra; variant: 600; ">
+                                colorsTerra600
+                                <a href="#origin-colorsTerra600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1345,10 +1345,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra700"
-                                title="theme: origin; category: origin; name: terra; variant: 700; ">
-                                originTerra700
-                                <a href="#origin-originTerra700"
+                                id="origin-colorsTerra700"
+                                title="theme: origin; category: colors; name: terra; variant: 700; ">
+                                colorsTerra700
+                                <a href="#origin-colorsTerra700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1366,10 +1366,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra800"
-                                title="theme: origin; category: origin; name: terra; variant: 800; ">
-                                originTerra800
-                                <a href="#origin-originTerra800"
+                                id="origin-colorsTerra800"
+                                title="theme: origin; category: colors; name: terra; variant: 800; ">
+                                colorsTerra800
+                                <a href="#origin-colorsTerra800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1387,10 +1387,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra900"
-                                title="theme: origin; category: origin; name: terra; variant: 900; ">
-                                originTerra900
-                                <a href="#origin-originTerra900"
+                                id="origin-colorsTerra900"
+                                title="theme: origin; category: colors; name: terra; variant: 900; ">
+                                colorsTerra900
+                                <a href="#origin-colorsTerra900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1408,10 +1408,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra010"
-                                title="theme: origin; category: origin; name: terra; variant: 010; ">
-                                originTerra010
-                                <a href="#origin-originTerra010"
+                                id="origin-colorsTerra010"
+                                title="theme: origin; category: colors; name: terra; variant: 010; ">
+                                colorsTerra010
+                                <a href="#origin-colorsTerra010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1429,10 +1429,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originTerra050"
-                                title="theme: origin; category: origin; name: terra; variant: 050; ">
-                                originTerra050
-                                <a href="#origin-originTerra050"
+                                id="origin-colorsTerra050"
+                                title="theme: origin; category: colors; name: terra; variant: 050; ">
+                                colorsTerra050
+                                <a href="#origin-colorsTerra050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1450,10 +1450,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber100"
-                                title="theme: origin; category: origin; name: amber; variant: 100; ">
-                                originAmber100
-                                <a href="#origin-originAmber100"
+                                id="origin-colorsAmber100"
+                                title="theme: origin; category: colors; name: amber; variant: 100; ">
+                                colorsAmber100
+                                <a href="#origin-colorsAmber100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1471,10 +1471,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber200"
-                                title="theme: origin; category: origin; name: amber; variant: 200; ">
-                                originAmber200
-                                <a href="#origin-originAmber200"
+                                id="origin-colorsAmber200"
+                                title="theme: origin; category: colors; name: amber; variant: 200; ">
+                                colorsAmber200
+                                <a href="#origin-colorsAmber200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1492,10 +1492,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber300"
-                                title="theme: origin; category: origin; name: amber; variant: 300; ">
-                                originAmber300
-                                <a href="#origin-originAmber300"
+                                id="origin-colorsAmber300"
+                                title="theme: origin; category: colors; name: amber; variant: 300; ">
+                                colorsAmber300
+                                <a href="#origin-colorsAmber300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1513,10 +1513,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber400"
-                                title="theme: origin; category: origin; name: amber; variant: 400; ">
-                                originAmber400
-                                <a href="#origin-originAmber400"
+                                id="origin-colorsAmber400"
+                                title="theme: origin; category: colors; name: amber; variant: 400; ">
+                                colorsAmber400
+                                <a href="#origin-colorsAmber400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1534,10 +1534,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber500"
-                                title="theme: origin; category: origin; name: amber; variant: 500; ">
-                                originAmber500
-                                <a href="#origin-originAmber500"
+                                id="origin-colorsAmber500"
+                                title="theme: origin; category: colors; name: amber; variant: 500; ">
+                                colorsAmber500
+                                <a href="#origin-colorsAmber500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1555,10 +1555,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber600"
-                                title="theme: origin; category: origin; name: amber; variant: 600; ">
-                                originAmber600
-                                <a href="#origin-originAmber600"
+                                id="origin-colorsAmber600"
+                                title="theme: origin; category: colors; name: amber; variant: 600; ">
+                                colorsAmber600
+                                <a href="#origin-colorsAmber600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1576,10 +1576,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber700"
-                                title="theme: origin; category: origin; name: amber; variant: 700; ">
-                                originAmber700
-                                <a href="#origin-originAmber700"
+                                id="origin-colorsAmber700"
+                                title="theme: origin; category: colors; name: amber; variant: 700; ">
+                                colorsAmber700
+                                <a href="#origin-colorsAmber700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1597,10 +1597,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber800"
-                                title="theme: origin; category: origin; name: amber; variant: 800; ">
-                                originAmber800
-                                <a href="#origin-originAmber800"
+                                id="origin-colorsAmber800"
+                                title="theme: origin; category: colors; name: amber; variant: 800; ">
+                                colorsAmber800
+                                <a href="#origin-colorsAmber800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1618,10 +1618,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber900"
-                                title="theme: origin; category: origin; name: amber; variant: 900; ">
-                                originAmber900
-                                <a href="#origin-originAmber900"
+                                id="origin-colorsAmber900"
+                                title="theme: origin; category: colors; name: amber; variant: 900; ">
+                                colorsAmber900
+                                <a href="#origin-colorsAmber900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1639,10 +1639,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber010"
-                                title="theme: origin; category: origin; name: amber; variant: 010; ">
-                                originAmber010
-                                <a href="#origin-originAmber010"
+                                id="origin-colorsAmber010"
+                                title="theme: origin; category: colors; name: amber; variant: 010; ">
+                                colorsAmber010
+                                <a href="#origin-colorsAmber010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1660,10 +1660,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originAmber050"
-                                title="theme: origin; category: origin; name: amber; variant: 050; ">
-                                originAmber050
-                                <a href="#origin-originAmber050"
+                                id="origin-colorsAmber050"
+                                title="theme: origin; category: colors; name: amber; variant: 050; ">
+                                colorsAmber050
+                                <a href="#origin-colorsAmber050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1681,10 +1681,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite100"
-                                title="theme: origin; category: origin; name: malachite; variant: 100; ">
-                                originMalachite100
-                                <a href="#origin-originMalachite100"
+                                id="origin-colorsMalachite100"
+                                title="theme: origin; category: colors; name: malachite; variant: 100; ">
+                                colorsMalachite100
+                                <a href="#origin-colorsMalachite100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1702,10 +1702,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite200"
-                                title="theme: origin; category: origin; name: malachite; variant: 200; ">
-                                originMalachite200
-                                <a href="#origin-originMalachite200"
+                                id="origin-colorsMalachite200"
+                                title="theme: origin; category: colors; name: malachite; variant: 200; ">
+                                colorsMalachite200
+                                <a href="#origin-colorsMalachite200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1723,10 +1723,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite300"
-                                title="theme: origin; category: origin; name: malachite; variant: 300; ">
-                                originMalachite300
-                                <a href="#origin-originMalachite300"
+                                id="origin-colorsMalachite300"
+                                title="theme: origin; category: colors; name: malachite; variant: 300; ">
+                                colorsMalachite300
+                                <a href="#origin-colorsMalachite300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1744,10 +1744,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite400"
-                                title="theme: origin; category: origin; name: malachite; variant: 400; ">
-                                originMalachite400
-                                <a href="#origin-originMalachite400"
+                                id="origin-colorsMalachite400"
+                                title="theme: origin; category: colors; name: malachite; variant: 400; ">
+                                colorsMalachite400
+                                <a href="#origin-colorsMalachite400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1765,10 +1765,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite500"
-                                title="theme: origin; category: origin; name: malachite; variant: 500; ">
-                                originMalachite500
-                                <a href="#origin-originMalachite500"
+                                id="origin-colorsMalachite500"
+                                title="theme: origin; category: colors; name: malachite; variant: 500; ">
+                                colorsMalachite500
+                                <a href="#origin-colorsMalachite500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1786,10 +1786,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite600"
-                                title="theme: origin; category: origin; name: malachite; variant: 600; ">
-                                originMalachite600
-                                <a href="#origin-originMalachite600"
+                                id="origin-colorsMalachite600"
+                                title="theme: origin; category: colors; name: malachite; variant: 600; ">
+                                colorsMalachite600
+                                <a href="#origin-colorsMalachite600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1807,10 +1807,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite700"
-                                title="theme: origin; category: origin; name: malachite; variant: 700; ">
-                                originMalachite700
-                                <a href="#origin-originMalachite700"
+                                id="origin-colorsMalachite700"
+                                title="theme: origin; category: colors; name: malachite; variant: 700; ">
+                                colorsMalachite700
+                                <a href="#origin-colorsMalachite700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1828,10 +1828,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite800"
-                                title="theme: origin; category: origin; name: malachite; variant: 800; ">
-                                originMalachite800
-                                <a href="#origin-originMalachite800"
+                                id="origin-colorsMalachite800"
+                                title="theme: origin; category: colors; name: malachite; variant: 800; ">
+                                colorsMalachite800
+                                <a href="#origin-colorsMalachite800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1849,10 +1849,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite900"
-                                title="theme: origin; category: origin; name: malachite; variant: 900; ">
-                                originMalachite900
-                                <a href="#origin-originMalachite900"
+                                id="origin-colorsMalachite900"
+                                title="theme: origin; category: colors; name: malachite; variant: 900; ">
+                                colorsMalachite900
+                                <a href="#origin-colorsMalachite900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1870,10 +1870,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite010"
-                                title="theme: origin; category: origin; name: malachite; variant: 010; ">
-                                originMalachite010
-                                <a href="#origin-originMalachite010"
+                                id="origin-colorsMalachite010"
+                                title="theme: origin; category: colors; name: malachite; variant: 010; ">
+                                colorsMalachite010
+                                <a href="#origin-colorsMalachite010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1891,10 +1891,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originMalachite050"
-                                title="theme: origin; category: origin; name: malachite; variant: 050; ">
-                                originMalachite050
-                                <a href="#origin-originMalachite050"
+                                id="origin-colorsMalachite050"
+                                title="theme: origin; category: colors; name: malachite; variant: 050; ">
+                                colorsMalachite050
+                                <a href="#origin-colorsMalachite050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1912,10 +1912,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray100"
-                                title="theme: origin; category: origin; name: gray; variant: 100; ">
-                                originGray100
-                                <a href="#origin-originGray100"
+                                id="origin-colorsGray100"
+                                title="theme: origin; category: colors; name: gray; variant: 100; ">
+                                colorsGray100
+                                <a href="#origin-colorsGray100"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1933,10 +1933,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray200"
-                                title="theme: origin; category: origin; name: gray; variant: 200; ">
-                                originGray200
-                                <a href="#origin-originGray200"
+                                id="origin-colorsGray200"
+                                title="theme: origin; category: colors; name: gray; variant: 200; ">
+                                colorsGray200
+                                <a href="#origin-colorsGray200"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1954,10 +1954,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray300"
-                                title="theme: origin; category: origin; name: gray; variant: 300; ">
-                                originGray300
-                                <a href="#origin-originGray300"
+                                id="origin-colorsGray300"
+                                title="theme: origin; category: colors; name: gray; variant: 300; ">
+                                colorsGray300
+                                <a href="#origin-colorsGray300"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1975,10 +1975,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray400"
-                                title="theme: origin; category: origin; name: gray; variant: 400; ">
-                                originGray400
-                                <a href="#origin-originGray400"
+                                id="origin-colorsGray400"
+                                title="theme: origin; category: colors; name: gray; variant: 400; ">
+                                colorsGray400
+                                <a href="#origin-colorsGray400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -1996,10 +1996,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray500"
-                                title="theme: origin; category: origin; name: gray; variant: 500; ">
-                                originGray500
-                                <a href="#origin-originGray500"
+                                id="origin-colorsGray500"
+                                title="theme: origin; category: colors; name: gray; variant: 500; ">
+                                colorsGray500
+                                <a href="#origin-colorsGray500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2017,10 +2017,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray600"
-                                title="theme: origin; category: origin; name: gray; variant: 600; ">
-                                originGray600
-                                <a href="#origin-originGray600"
+                                id="origin-colorsGray600"
+                                title="theme: origin; category: colors; name: gray; variant: 600; ">
+                                colorsGray600
+                                <a href="#origin-colorsGray600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2038,10 +2038,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray700"
-                                title="theme: origin; category: origin; name: gray; variant: 700; ">
-                                originGray700
-                                <a href="#origin-originGray700"
+                                id="origin-colorsGray700"
+                                title="theme: origin; category: colors; name: gray; variant: 700; ">
+                                colorsGray700
+                                <a href="#origin-colorsGray700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2059,10 +2059,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray800"
-                                title="theme: origin; category: origin; name: gray; variant: 800; ">
-                                originGray800
-                                <a href="#origin-originGray800"
+                                id="origin-colorsGray800"
+                                title="theme: origin; category: colors; name: gray; variant: 800; ">
+                                colorsGray800
+                                <a href="#origin-colorsGray800"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2080,10 +2080,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray900"
-                                title="theme: origin; category: origin; name: gray; variant: 900; ">
-                                originGray900
-                                <a href="#origin-originGray900"
+                                id="origin-colorsGray900"
+                                title="theme: origin; category: colors; name: gray; variant: 900; ">
+                                colorsGray900
+                                <a href="#origin-colorsGray900"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2101,10 +2101,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray1000"
-                                title="theme: origin; category: origin; name: gray; variant: 1000; ">
-                                originGray1000
-                                <a href="#origin-originGray1000"
+                                id="origin-colorsGray1000"
+                                title="theme: origin; category: colors; name: gray; variant: 1000; ">
+                                colorsGray1000
+                                <a href="#origin-colorsGray1000"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2122,10 +2122,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray000"
-                                title="theme: origin; category: origin; name: gray; variant: 000; ">
-                                originGray000
-                                <a href="#origin-originGray000"
+                                id="origin-colorsGray000"
+                                title="theme: origin; category: colors; name: gray; variant: 000; ">
+                                colorsGray000
+                                <a href="#origin-colorsGray000"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2143,10 +2143,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray010"
-                                title="theme: origin; category: origin; name: gray; variant: 010; ">
-                                originGray010
-                                <a href="#origin-originGray010"
+                                id="origin-colorsGray010"
+                                title="theme: origin; category: colors; name: gray; variant: 010; ">
+                                colorsGray010
+                                <a href="#origin-colorsGray010"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2164,10 +2164,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originGray050"
-                                title="theme: origin; category: origin; name: gray; variant: 050; ">
-                                originGray050
-                                <a href="#origin-originGray050"
+                                id="origin-colorsGray050"
+                                title="theme: origin; category: colors; name: gray; variant: 050; ">
+                                colorsGray050
+                                <a href="#origin-colorsGray050"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2185,10 +2185,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originSkin400"
-                                title="theme: origin; category: origin; name: skin; variant: 400; ">
-                                originSkin400
-                                <a href="#origin-originSkin400"
+                                id="origin-colorsSkin400"
+                                title="theme: origin; category: colors; name: skin; variant: 400; ">
+                                colorsSkin400
+                                <a href="#origin-colorsSkin400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2206,10 +2206,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originSkin500"
-                                title="theme: origin; category: origin; name: skin; variant: 500; ">
-                                originSkin500
-                                <a href="#origin-originSkin500"
+                                id="origin-colorsSkin500"
+                                title="theme: origin; category: colors; name: skin; variant: 500; ">
+                                colorsSkin500
+                                <a href="#origin-colorsSkin500"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2227,10 +2227,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originSkin600"
-                                title="theme: origin; category: origin; name: skin; variant: 600; ">
-                                originSkin600
-                                <a href="#origin-originSkin600"
+                                id="origin-colorsSkin600"
+                                title="theme: origin; category: colors; name: skin; variant: 600; ">
+                                colorsSkin600
+                                <a href="#origin-colorsSkin600"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2248,10 +2248,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originSkin700"
-                                title="theme: origin; category: origin; name: skin; variant: 700; ">
-                                originSkin700
-                                <a href="#origin-originSkin700"
+                                id="origin-colorsSkin700"
+                                title="theme: origin; category: colors; name: skin; variant: 700; ">
+                                colorsSkin700
+                                <a href="#origin-colorsSkin700"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2269,10 +2269,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originFuchsia400"
-                                title="theme: origin; category: origin; name: fuchsia; variant: 400; ">
-                                originFuchsia400
-                                <a href="#origin-originFuchsia400"
+                                id="origin-colorsFuchsia400"
+                                title="theme: origin; category: colors; name: fuchsia; variant: 400; ">
+                                colorsFuchsia400
+                                <a href="#origin-colorsFuchsia400"
                                    title="permalink"
                                    class="permalink">
                                     🔗
@@ -2290,10 +2290,10 @@
                         </tr>
                         <tr>
                             <td class="with-icons is-vcentered"
-                                id="origin-originFuchsia500"
-                                title="theme: origin; category: origin; name: fuchsia; variant: 500; ">
-                                originFuchsia500
-                                <a href="#origin-originFuchsia500"
+                                id="origin-colorsFuchsia500"
+                                title="theme: origin; category: colors; name: fuchsia; variant: 500; ">
+                                colorsFuchsia500
+                                <a href="#origin-colorsFuchsia500"
                                    title="permalink"
                                    class="permalink">
                                     🔗