@ebay/skin 18.0.7 → 18.1.0

package/src/sass/toggle-button-group/stories/gallery-layout.stories.js

@@ -95,6 +95,123 @@ export const usingCSSImage = () => `
 </div>
 `;
 
+export const minContainer = () => `
+<div style="width: 280px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--gallery-layout">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 30%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--gallery-layout">

package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js

@@ -2,6 +2,55 @@ export default {
     title: "Skin/Toggle Button Group/List Layout/Layouts Exceptions",
 };
 
+export const minContainer2buttons = () => `
+<div style="width: 280px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout" data-columns-min="2">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container2buttons = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout" data-columns-xs="2">

package/src/sass/toggle-button-group/stories/list-layout.stories.js

@@ -133,6 +133,132 @@ export const mixedContent = () => `
 </div>
 `;
 
+export const _minContainer = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">List Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">

package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js

@@ -2,6 +2,78 @@ export default {
     title: "Skin/Toggle Button Group/Minimal Layout/Layouts Exceptions",
 };
 
+export const _mincontainer1button = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group" data-columns-min="1">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container3buttons = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group" data-columns-xs="3">

package/src/sass/toggle-button-group/stories/minimal-layout.stories.js

@@ -1,5 +1,78 @@
 export default { title: "Skin/Toggle Button Group/Minimal Layout" };
 
+export const minContainer = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+
+`;
+
 export const _320container = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group">

package/src/sass/toggle-button-group/toggle-button-group.scss

@@ -38,7 +38,7 @@
     --row-list-toggle-buttons-xl: 5;
 
     // Gallery Layout
-    --row-gallery-toggle-buttons-min: 1;
+    --row-gallery-toggle-buttons-min: 2;
     --row-gallery-toggle-buttons-xs: 2;
     --row-gallery-toggle-buttons-sm: 3;
     --row-gallery-toggle-buttons-md: 4;
@@ -49,6 +49,38 @@
     container: toggle-buttons-container / inline-size;
 }
 
+// These provide a generic override for the number of buttons per line
+// for containers under 320px wide. No more than 3 should be needed.
+@supports not (contain: inline-size) {
+    @media (max-width: $_screen-size-XS) {
+        .toggle-button-group[data-columns-min="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+
+        .toggle-button-group[data-columns-min="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .toggle-button-group[data-columns-min="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+}
+
+@container toggle-buttons-container (inline-size < #{$_screen-size-XS}) {
+    .toggle-button-group[data-columns-min="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .toggle-button-group[data-columns-min="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .toggle-button-group[data-columns-min="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
 .toggle-button-group ul {
     display: grid;
     gap: var(--spacing-100);
@@ -74,12 +106,20 @@
 }
 
 /* Layout Themes */
+.toggle-button-group--list-layout ul {
+    grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button {
     justify-content: left;
     max-width: 100%;
     min-width: auto;
 }
 
+.toggle-button-group--gallery-layout ul {
+    grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li {
     max-width: 100%;
 }

package/src/sass/utility/utility.scss

@@ -71,6 +71,10 @@
     @include image-treatment(16px);
 }
 
+.image-disabled {
+    filter: var(--color-media-disabled-filter);
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;

package/src/svg/icon/icon-alipay-cn-12-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="19"
+    height="11"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m16.58 6.959-.221.477-.225-.477h-.219l.342.66v.46h.201v-.46l.001-.002.34-.658h-.219Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m15.164 7.854.075.226h.211l-.415-1.121h-.161l-.414 1.12h.211l.079-.225h.414Zm-.204-.606.156.465H14.8l.161-.465Zm-1.359-.289h-.438v1.12h.203v-.43h.235c.219 0 .372-.142.372-.345 0-.203-.153-.345-.372-.345Zm-.011.536h-.224V7.11h.224c.113 0 .18.098.18.193 0 .092-.063.19-.18.19Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M12.34 8.08h-.202V6.959h.203v1.12Zm-1.63 0V6.959h.204v.968h.48v.153h-.683Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m9.76 7.854.075.226h.211l-.415-1.121H9.47l-.414 1.12h.21l.08-.225h.414Zm-.204-.606.156.465h-.317l.161-.465Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M13.561 3.912h.453v.47h.184v.19h-.184v1.782a.178.178 0 0 1-.169.175h-.587v-.196h.23a.078.078 0 0 0 .073-.07V4.57h-1.116v-.189h1.116v-.47Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M12.97 4.833c.039 0 .072.024.089.057l.273.863h-.446l-.294-.92h.377Zm-1.545.277.52-1.22h.485l-.329.746h.158v1.927h-.436V5.111h-.398Zm5.415.851.159.535h-.002l.002.006h-2.491v-.19h.974v-.794h-.974v-.19h.974v-.374h-.974v-.189h2.431v.19h-.974v.374h.974v.189h-.974v.795h.496l-.122-.41h.422c.037 0 .068.024.079.058Zm-.406-1.647h-1.42v.279h-.506v-.468h.95v-.26h.53v.26h.821a.135.135 0 0 1 .131.137v.33h-.506v-.278Zm-6.117.454h.87c-.13.499-.457.871-.83 1.145.257.159.585.324.999.473v.219s-.646-.128-1.29-.5c-.643.375-1.307.5-1.307.5v-.231a3.94 3.94 0 0 0 1.02-.454 2.514 2.514 0 0 1-.722-.767h.452s.139.248.553.56c.462-.39.555-.752.555-.752H8.933v-.193h.845v-.31H8.776v-.192h1.002v-.301c0-.05.04-.092.09-.092h.45v.393h1.008v.193h-1.009v.31Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M3.796 3.545a.79.79 0 0 0-.794.787v3.337a.79.79 0 0 0 .794.787h3.37a.79.79 0 0 0 .793-.787v-.034a55.155 55.155 0 0 1-1.935-.84c-.437.532-1 .855-1.585.855-.99 0-1.325-.858-.857-1.422.102-.123.276-.24.545-.307.422-.102 1.093.065 1.722.27.113-.206.209-.434.28-.676H4.19v-.194h1v-.35H3.979v-.194h1.21V4.28s0-.084.086-.084h.489v.581h1.197v.195H5.764v.349h.977c-.094.38-.236.728-.414 1.035.297.106.563.207.761.273.662.219.847.246.871.249V4.332a.79.79 0 0 0-.794-.787H3.796Zm.544 2.66a1.5 1.5 0 0 0-.128.008c-.124.012-.357.066-.484.178-.38.329-.153.93.618.93.449 0 .896-.283 1.248-.738-.453-.22-.844-.382-1.254-.377Z"
+    fill="#1677FF"
+  />
+</svg>

package/src/svg/icon/icon-alipay-cn-18-colored.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 30 18" xmlns="http://www.w3.org/2000/svg">
+  <rect
+    x=".5"
+    y=".5"
+    width="29"
+    height="17"
+    rx="1.5"
+    fill="#fff"
+    stroke="#191919"
+    stroke-width="1"
+  />
+  <path
+    d="m25.341 10.508-.347.75-.353-.75h-.345l.537 1.037v.724h.316v-.724l.002-.004.535-1.033h-.345Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m23.116 11.913.118.355h.331l-.652-1.761h-.254l-.65 1.76h.331l.124-.354h.652Zm-.321-.952.245.73h-.499l.254-.73Zm-2.135-.454h-.69v1.76h.32v-.676h.37c.343 0 .583-.223.583-.542 0-.32-.24-.542-.584-.542Zm-.018.842h-.353v-.603h.352c.177 0 .283.154.283.303 0 .145-.099.3-.282.3Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M18.678 12.268h-.319v-1.761h.32v1.76Zm-2.561 0v-1.761h.319v1.52h.754v.24h-1.073Z"
+    fill="#3F3B3A"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m14.623 11.913.118.355h.331l-.653-1.761h-.253l-.65 1.76h.331l.123-.354h.653Zm-.321-.952.245.73h-.499l.254-.73Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M20.597 5.719h.711v.738h.29v.298h-.29v2.8a.28.28 0 0 1-.265.276h-.923v-.308h.362a.123.123 0 0 0 .115-.111V6.755h-1.755v-.297h1.755v-.74Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M19.666 7.167a.16.16 0 0 1 .141.09l.43 1.355h-.701l-.463-1.445h.593Zm-2.426.435.816-1.918h.762l-.516 1.173h.248v3.028h-.684V7.602h-.627Zm8.507 1.338.25.84h-.003l.003.01h-3.914v-.297h1.531v-1.25h-1.53v-.297h1.53v-.588h-1.53V7.06h3.82v.298h-1.531v.588h1.531v.297h-1.531v1.25h.78l-.193-.645h.663a.13.13 0 0 1 .124.092Zm-.637-2.59h-2.23v.44h-.797v-.736h1.494v-.41h.833v.41h1.29a.212.212 0 0 1 .206.216v.52h-.797v-.44Zm-9.611.714h1.367c-.205.783-.719 1.368-1.304 1.8a8.47 8.47 0 0 0 1.569.742v.344s-1.016-.2-2.027-.787c-1.01.591-2.054.787-2.054.787v-.363a6.19 6.19 0 0 0 1.604-.713c-.44-.314-.848-.71-1.135-1.205h.71s.218.39.868.879c.726-.612.873-1.18.873-1.18h-2.647v-.304h1.329v-.487h-1.575v-.303h1.575v-.473c0-.08.063-.144.14-.144h.707v.617h1.585v.303H15.5v.487Z"
+    fill="#3F3B3A"
+  />
+  <path
+    d="M5.25 5.142c-.69 0-1.248.553-1.248 1.236v5.245c0 .683.558 1.236 1.248 1.236h5.294c.69 0 1.248-.553 1.248-1.236v-.054c-.023-.01-2.025-.836-3.042-1.321-.686.837-1.571 1.344-2.49 1.344-1.554 0-2.082-1.347-1.346-2.234.16-.194.433-.378.857-.482.662-.161 1.717.101 2.706.424.177-.324.327-.682.438-1.062H5.87v-.306h1.57v-.548H5.538v-.306H7.44v-.782s0-.131.135-.131h.767v.913h1.881v.306h-1.88v.548h1.535a6.187 6.187 0 0 1-.65 1.627c.466.167.884.325 1.196.429 1.04.344 1.33.386 1.368.39v-4c0-.683-.558-1.236-1.248-1.236H5.25Zm.854 4.181c-.067 0-.134.004-.201.011-.195.02-.56.104-.76.28-.599.517-.24 1.462.972 1.462.704 0 1.408-.446 1.96-1.16-.712-.345-1.326-.6-1.97-.593Z"
+    fill="#1677FF"
+  />
+</svg>