@ebay/skin 16.7.1 → 16.8.0-0

package/dist/pagination/pagination.css

@@ -5,7 +5,7 @@ nav.pagination {
   color: var(--pagination-item-foreground-color, var(--color-foreground-secondary));
   font-family: inherit;
   font-size: 1rem;
-  margin: 8px 0;
+  margin: var(--spacing-100) 0;
   max-width: 100%;
 }
 nav.pagination a,
@@ -38,18 +38,20 @@ button.pagination__previous {
 }
 a.pagination__next,
 button.pagination__next {
-  margin-left: 8px;
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
 }
 a.pagination__previous,
 button.pagination__previous {
-  margin-right: 8px;
+  -webkit-margin-end: var(--spacing-100);
+          margin-inline-end: var(--spacing-100);
 }
 .pagination__item {
   align-items: center;
   display: inline-flex;
   justify-content: center;
   box-sizing: border-box;
-  font-weight: 500;
+  font-weight: var(--font-weight-regular);
   height: 44px;
   width: 44px;
 }
@@ -80,7 +82,7 @@ button.pagination__item::after {
 a.pagination__item[aria-current="page"],
 button.pagination__item[aria-current="page"] {
   color: var(--pagination-item-current-foreground-color, var(--color-foreground-primary));
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 a.pagination__item[aria-current="page"]::after,
 button.pagination__item[aria-current="page"]::after {
@@ -121,24 +123,14 @@ nav.pagination--fluid ol.pagination__items {
   max-width: none;
 }
 nav.pagination--fluid ol.pagination__items li {
-  flex: 1 0 48px;
+  flex: 1 0 var(--spacing-600);
 }
 [dir="rtl"] nav.pagination svg.icon--arrow-right-16,
 [dir="rtl"] nav.pagination svg.icon--arrow-left-16 {
   transform: rotate(180deg);
 }
-[dir="rtl"] a.pagination__next,
-[dir="rtl"] button.pagination__next {
-  margin-left: 0;
-  margin-right: 8px;
-}
-[dir="rtl"] a.pagination__previous,
-[dir="rtl"] button.pagination__previous {
-  margin-left: 8px;
-  margin-right: 0;
-}
 @media (min-width: 768px) {
   nav.pagination {
-    margin: 16px 0;
+    margin: var(--spacing-200) 0;
   }
 }

package/dist/panel-dialog/panel-dialog.css

@@ -40,7 +40,7 @@
 .panel-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: var(--spacing-200) var(--spacing-200) 0;
   position: relative;
 }
 .panel-dialog__header h1,
@@ -57,7 +57,8 @@
   white-space: nowrap;
 }
 .panel-dialog__header > :last-child:not(:only-child) {
-  margin-left: 16px;
+  -webkit-margin-start: var(--spacing-200);
+          margin-inline-start: var(--spacing-200);
 }
 .panel-dialog__header .fake-link {
   outline-offset: 4px;
@@ -66,7 +67,7 @@
 .panel-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
   height: 1px;
   overflow-y: auto;
@@ -81,11 +82,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 16px;
+  padding: var(--spacing-200);
   position: relative;
 }
 .panel-dialog__footer > :not(:first-child) {
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
 }
 button.icon-btn.panel-dialog__close {
   align-self: center;
@@ -98,7 +99,7 @@ button.icon-btn.panel-dialog__close {
   z-index: 1;
 }
 .panel-dialog__title:not(:first-child) {
-  margin-left: 16px;
+  margin-left: var(--spacing-200);
 }
 .panel-dialog--show.panel-dialog--mask-fade,
 .panel-dialog--hide.panel-dialog--mask-fade {

package/dist/progress-bar/progress-bar.css

@@ -2,7 +2,7 @@
   border: none;
   color: var(--progress-bar-foreground-color, var(--color-foreground-accent));
   height: 4px;
-  margin: 8px 0;
+  margin: var(--spacing-100) 0;
 }
 .progress-bar::-webkit-progress-bar {
   background-color: var(--progress-bar-background-color, var(--color-stroke-subtle));
@@ -22,6 +22,6 @@
 }
 @media (min-width: 512px) {
   .progress-bar {
-    margin: 16px 0;
+    margin: var(--spacing-200) 0;
   }
 }

package/dist/progress-stepper/progress-stepper.css

@@ -20,7 +20,7 @@ hr.progress-stepper__separator {
   top: 10px;
 }
 .progress-stepper__text {
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   justify-self: center;
   margin-top: 8px;
   text-align: center;
@@ -32,7 +32,7 @@ hr.progress-stepper__separator {
 .progress-stepper__text h5,
 .progress-stepper__text h6 {
   color: var(--progress-stepper-text-color, var(--color-foreground-primary));
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   font-weight: normal;
 }
 .progress-stepper__items--upcoming .progress-stepper__text h2,
@@ -82,16 +82,18 @@ hr.progress-stepper__separator {
 }
 .progress-stepper {
   overflow: auto;
-  padding: 16px 0;
+  padding: var(--spacing-200) 0;
 }
 .progress-stepper__item:first-child .progress-stepper__text {
   align-self: flex-start;
-  margin-left: 4px;
+  -webkit-margin-start: var(--spacing-50);
+          margin-inline-start: var(--spacing-50);
   text-align: left;
 }
 .progress-stepper__item:last-child .progress-stepper__text {
   align-self: flex-end;
-  margin-right: 4px;
+  -webkit-margin-end: var(--spacing-50);
+          margin-inline-end: var(--spacing-50);
   text-align: right;
 }
 .progress-stepper--vertical .progress-stepper__item {
@@ -113,7 +115,8 @@ hr.progress-stepper__separator {
 }
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
   align-self: center;
-  margin-left: 16px;
+  -webkit-margin-start: var(--spacing-200);
+          margin-inline-start: var(--spacing-200);
   margin-top: 0;
   text-align: left;
   white-space: nowrap;
@@ -136,8 +139,6 @@ hr.progress-stepper__separator {
   width: 4px;
 }
 [dir="rtl"] .progress-stepper__item:first-child .progress-stepper__text {
-  margin-left: 0;
-  margin-right: 4px;
   text-align: right;
 }
 [dir="rtl"] .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
@@ -155,13 +156,9 @@ hr.progress-stepper__separator {
   background-image: none;
 }
 [dir="rtl"] .progress-stepper__item:last-child .progress-stepper__text {
-  margin-left: 4px;
-  margin-right: 0;
   text-align: left;
 }
 [dir="rtl"] .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
-  margin-left: inherit;
-  margin-right: 16px;
   text-align: right;
 }
 [dir="rtl"] .progress-stepper--vertical .progress-stepper__separator {
@@ -173,7 +170,7 @@ hr.progress-stepper__separator {
     min-width: 120px;
   }
   .progress-stepper__text {
-    font-size: 0.875rem;
+    font-size: var(--font-size-default);
     width: 120px;
   }
   .progress-stepper__text h2,
@@ -181,6 +178,6 @@ hr.progress-stepper__separator {
   .progress-stepper__text h4,
   .progress-stepper__text h5,
   .progress-stepper__text h6 {
-    font-size: 0.875rem;
+    font-size: var(--font-size-default);
   }
 }

package/dist/section-notice/section-notice.css

@@ -1,7 +1,7 @@
 .section-notice {
   background-color: var(--section-notice-default-background-color, var(--color-background-secondary));
   border-radius: var(--section-notice-border-radius, var(--border-radius-50));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   margin: 8px 0;
   padding: 16px;
 }
@@ -17,7 +17,7 @@ span[role="region"].section-notice {
   display: grid;
 }
 .section-notice__title {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: normal;
   margin: 0;
 }
@@ -29,7 +29,7 @@ span[role="region"].section-notice {
 }
 .section-notice button.fake-link {
   color: var(--section-notice-foreground-color, var(--color-foreground-primary));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: bold;
 }
 .section-notice button.fake-link:hover {
@@ -37,7 +37,7 @@ span[role="region"].section-notice {
 }
 .section-notice a {
   color: var(--section-notice-foreground-color, var(--color-foreground-primary));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   font-weight: bold;
 }
 .section-notice a:hover {
@@ -49,14 +49,16 @@ span[role="region"].section-notice {
 .section-notice__header {
   grid-column: 1;
   grid-row: 1;
-  height: 16px;
+  height: var(--spacing-200);
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
   margin-top: 1px;
-  padding-right: 16px;
 }
 .section-notice__main {
   grid-column: 1 / 3;
   grid-row: 1;
-  padding-right: 16px;
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
 }
 .section-notice__header + .section-notice__main {
   grid-column: 2;
@@ -68,23 +70,23 @@ span[role="region"].section-notice {
   margin-top: 2px;
 }
 .section-notice__main p {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   margin: 0;
 }
 p.section-notice__cta {
   grid-column: 2;
   grid-row: 2;
   justify-self: flex-start;
-  margin-right: 16px;
-  margin-top: 16px;
+  margin-right: var(--spacing-200);
+  margin-top: var(--spacing-200);
 }
 .section-notice__main .section-notice__title ~ p {
-  margin: 4px 0 0;
+  margin: var(--spacing-50) 0 0;
 }
 @media (min-width: 512px) {
   section.section-notice,
   div[role="region"].section-notice {
-    margin: 16px 0;
+    margin: var(--spacing-200) 0;
   }
   p.section-notice__cta {
     grid-column: 4;
@@ -92,16 +94,12 @@ p.section-notice__cta {
     justify-self: flex-end;
     margin-bottom: 0;
     margin-top: 0;
-    padding-right: 16px;
+    padding-right: var(--spacing-200);
   }
   .section-notice__footer {
-    padding-left: 16px;
+    padding-left: var(--spacing-200);
   }
 }
-[dir="rtl"] .section-notice__header {
-  padding-left: 16px;
-  padding-right: 0;
-}
 [dir="rtl"] .section-notice__footer {
   justify-self: flex-start;
   margin-left: initial;
@@ -117,7 +115,7 @@ p.section-notice__cta {
   padding-left: 16px;
 }
 .section-notice__header:has(svg[class*="24"]) {
-  height: 24px;
+  height: var(--spacing-300);
 }
 .section-notice__header:has(svg[class*="24"]) + .section-notice__main {
   padding-top: 2px;

package/dist/section-title/section-title.css

@@ -7,60 +7,59 @@
   max-width: 75%;
 }
 .section-title__title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
   margin: 0;
 }
 .section-title__subtitle {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   line-height: 20px;
   color: var(--section-title-subtitle-color, var(--color-foreground-secondary));
 }
 .section-title__title svg.icon {
   background-color: var(--color-background-secondary);
   border-radius: 12px;
-  margin-left: 8px;
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
   padding: 7px;
 }
 .section-title__info {
   bottom: -3px;
-  margin: 0 24px 0 8px;
+  margin: 0 var(--spacing-300) 0 var(--spacing-100);
   position: relative;
 }
 .section-title__overflow {
-  margin: 0 24px 0 auto;
+  margin: 0 var(--spacing-300) 0 auto;
 }
 .section-title__cta,
 .section-title__overflow {
   align-items: baseline;
   display: flex;
-  height: 32px;
+  height: var(--spacing-400);
   margin-left: auto;
   margin-right: 0;
 }
 .section-title button.icon-btn,
 .section-title__overflow button.icon-btn {
-  height: 32px;
-  min-width: 32px;
-  width: 32px;
+  height: var(--spacing-400);
+  min-width: var(--spacing-400);
+  width: var(--spacing-400);
 }
 .section-title__title-container + button.icon-btn {
-  margin-left: 8px;
+  margin-left: var(--spacing-100);
 }
 .section-title--large .section-title__title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
 }
 .section-title--large > .section-title__cta,
 .section-title--large > .section-title__info,
 .section-title--large > .section-title__overflow {
-  height: 32px;
+  height: var(--spacing-400);
 }
 [dir="rtl"] .section-title__title svg.icon {
-  margin-left: 0;
-  margin-right: 8px;
   transform: rotate(180deg);
 }
 [dir="rtl"] .section-title__cta {
@@ -72,16 +71,16 @@
   margin-right: auto;
 }
 [dir="rtl"] .section-title__info {
-  margin: 0 8px 0 24px;
+  margin: 0 var(--spacing-100) 0 var(--spacing-300);
 }
 @media (min-width: 512px) {
   .section-title__title {
-    font-size: 1.5rem;
-    font-weight: 700;
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
     line-height: 32px;
   }
   .section-title__subtitle {
-    font-size: 1rem;
+    font-size: var(--font-size-medium);
     line-height: 24px;
   }
 }

package/dist/segmented-buttons/segmented-buttons.css

@@ -3,7 +3,7 @@
   border-radius: var(--segmented-button-border-radius, calc(48px / 2));
   max-width: 720px;
   min-width: 215px;
-  padding: 4px;
+  padding: var(--spacing-50);
 }
 .segmented-buttons > ul {
   display: flex;
@@ -16,20 +16,21 @@
   flex: 1;
 }
 .segmented-buttons > ul > li:not(:first-child) {
-  margin-left: 8px;
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
 }
 .segmented-buttons__button {
   background-color: transparent;
   border: none;
   border-radius: var(--btn-border-radius, calc(40px / 2));
   color: var(--color-foreground-on-primary);
-  font-size: 0.875rem;
-  min-height: 32px;
-  padding: 8px 16px;
+  font-size: var(--font-size-default);
+  min-height: calc(40px - (var(--spacing-50) * 2));
+  padding: var(--spacing-100) var(--spacing-200);
   width: 100%;
 }
 .segmented-buttons--large .segmented-buttons__button {
-  min-height: 40px;
+  min-height: calc(48px - (var(--spacing-50) * 2));
 }
 .segmented-buttons__button-cell {
   align-items: center;
@@ -41,10 +42,12 @@
   align-self: center;
 }
 .segmented-buttons__button svg.icon:first-child {
-  margin-right: 8px;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
 }
 .segmented-buttons__button svg.icon:last-child {
-  margin-left: 8px;
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
 }
 .segmented-buttons__button svg.icon:only-child {
   margin: 0;
@@ -60,7 +63,3 @@
 .segmented-buttons__button:not([aria-current]):focus {
   background-color: var(--color-state-primary-hover);
 }
-[dir="rtl"] .segmented-buttons > ul > li:not(:first-child) {
-  margin-left: 0;
-  margin-right: 8px;
-}

package/dist/select/select.css

@@ -1,6 +1,6 @@
 .select {
   color: var(--select-foreground-color, var(--color-foreground-primary));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   position: relative;
 }
 span.select {
@@ -19,7 +19,7 @@ span.select {
   font-family: inherit;
   font-size: 1em;
   height: 40px;
-  padding: 0 32px 0 16px;
+  padding: 0 var(--spacing-400) 0 var(--spacing-200);
   vertical-align: middle;
 }
 .select svg.icon--chevron-down-12 {
@@ -30,7 +30,7 @@ span.select {
   top: 0;
 }
 .select--large select {
-  font-size: 1.125rem;
+  font-size: var(--font-size-18);
   height: 48px;
 }
 .select--fluid {
@@ -84,7 +84,7 @@ span.select {
 }
 [dir="rtl"] .select > select {
   padding-left: 30px;
-  padding-right: 16px;
+  padding-right: var(--spacing-200);
 }
 [dir="rtl"] .select svg {
   left: 16px;

package/dist/signal/signal.css

@@ -3,10 +3,10 @@
   border-radius: var(--border-radius-100);
   box-sizing: border-box;
   display: inline-block;
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   font-weight: bold;
   letter-spacing: 0.5px;
-  margin: 8px 0;
+  margin: var(--spacing-100) 0;
   padding: 2px 12px 1px;
   text-align: center;
   text-transform: uppercase;

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -9,12 +9,12 @@
   bottom: 40px;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
   color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
-  left: 8px;
+  left: var(--spacing-100);
   margin: auto;
   max-height: 40vh;
   max-width: 448px;
   position: fixed;
-  right: 8px;
+  right: var(--spacing-100);
   transform: translateY(0);
   will-change: opacity, transform;
   z-index: 2;
@@ -36,22 +36,24 @@
 }
 .snackbar-dialog__window {
   display: flex;
-  margin: 16px 24px;
+  margin: var(--spacing-200) var(--spacing-300);
 }
 .snackbar-dialog__window--column {
   flex-direction: column;
 }
 .snackbar-dialog__main {
-  margin-right: 32px;
+  -webkit-margin-end: var(--spacing-400);
+          margin-inline-end: var(--spacing-400);
 }
 .snackbar-dialog__main p {
   margin: 0;
 }
 .snackbar-dialog__actions {
-  margin-left: auto;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
 }
 .snackbar-dialog__window--column .snackbar-dialog__actions {
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
 }
 .snackbar-dialog__actions .fake-link {
   color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
@@ -73,11 +75,3 @@
   left: auto;
   right: 0;
 }
-[dir="rtl"] .snackbar-dialog__main {
-  margin-left: 32px;
-  margin-right: 0;
-}
-[dir="rtl"] .snackbar-dialog__actions {
-  margin-left: 0;
-  margin-right: auto;
-}

package/dist/svg/icon/icon-ai-spectrum-16-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.682 4.104a3.358 3.358 0 0 1-2.578 2.578l-2.467.53c-.85.182-.85 1.394 0 1.576l2.467.53a3.358 3.358 0 0 1 2.578 2.578l.53 2.467c.182.85 1.394.85 1.576 0l.53-2.467a3.358 3.358 0 0 1 2.578-2.578l2.467-.53c.85-.182.85-1.394 0-1.576l-2.467-.53a3.358 3.358 0 0 1-2.578-2.578l-.53-2.467c-.182-.85-1.394-.85-1.576 0l-.53 2.467ZM8 6.145A5.364 5.364 0 0 1 6.145 8 5.364 5.364 0 0 1 8 9.855 5.364 5.364 0 0 1 9.855 8 5.364 5.364 0 0 1 8 6.145Z"
+    fill="url(#ref-ai-spectrum-16-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-16-colored"
+      x1="21.21"
+      y1="11.161"
+      x2="11.274"
+      y2="21.774"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>

package/dist/svg/icon/icon-ai-spectrum-20-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10 6.303A6.32 6.32 0 0 1 6.303 10 6.32 6.32 0 0 1 10 13.697 6.32 6.32 0 0 1 13.697 10 6.32 6.32 0 0 1 10 6.303Zm1.013-4.484c-.234-1.092-1.792-1.092-2.026 0L8.306 4.99A4.317 4.317 0 0 1 4.99 8.306l-3.172.681c-1.092.234-1.092 1.792 0 2.026l3.172.681a4.317 4.317 0 0 1 3.315 3.315l.681 3.172c.234 1.092 1.792 1.092 2.026 0l.681-3.172a4.317 4.317 0 0 1 3.315-3.315l3.172-.681c1.092-.234 1.092-1.792 0-2.026l-3.172-.681a4.317 4.317 0 0 1-3.315-3.315l-.681-3.172Z"
+    fill="url(#ref-ai-spectrum-20-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-20-colored"
+      x1="26.984"
+      y1="14.065"
+      x2="14.21"
+      y2="27.71"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>

package/dist/svg/icon/icon-ai-spectrum-24-colored.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="m12 5.76-.115.538a7.276 7.276 0 0 1-5.587 5.587L5.76 12l.537.115a7.276 7.276 0 0 1 5.587 5.587l.115.537.115-.537a7.276 7.276 0 0 1 5.587-5.587L18.24 12l-.537-.115a7.276 7.276 0 0 1-5.587-5.587L12 5.76ZM13.238 2c-.286-1.334-2.19-1.333-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.335.286-1.334 2.19 0 2.476l3.877.833a5.277 5.277 0 0 1 4.051 4.051L10.762 22c.286 1.334 2.19 1.334 2.476 0l.833-3.878a5.277 5.277 0 0 1 4.051-4.051L22 13.238c1.334-.286 1.334-2.19 0-2.476l-3.878-.833a5.277 5.277 0 0 1-4.051-4.051L13.238 2Z"
+    fill="url(#ref-ai-spectrum-24-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-24-colored"
+      x1="32.758"
+      y1="16.968"
+      x2="17.145"
+      y2="33.645"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset=".098" stop-color="#FFD80E" />
+      <stop offset=".267" stop-color="#FF4242" />
+      <stop offset=".418" stop-color="#993EE0" />
+      <stop offset=".562" stop-color="#0968F6" />
+      <stop offset=".785" stop-color="#4EE04B" />
+    </linearGradient>
+  </defs>
+</svg>