@ebay/skin 16.7.1 → 16.8.0-0

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

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.788 1.637c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.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.467Z"
+    fill="url(#ref-ai-spectrum-filled-16-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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-filled-20-colored.svg

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.013 1.819c-.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-filled-20-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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-filled-24-colored.svg

@@ -0,0 +1,22 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.238 2c-.286-1.333-2.19-1.334-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.334.286-1.335 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-filled-24-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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>

package/dist/svg/icon/icon-ai-spectrum-thin-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="M8 4.959A4.86 4.86 0 0 1 4.959 8 4.859 4.859 0 0 1 8 11.041 4.859 4.859 0 0 1 11.041 8 4.859 4.859 0 0 1 8 4.959Zm.788-3.322c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.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.467Z"
+    fill="url(#ref-ai-spectrum-thin-16-colored)"
+  />
+  <defs>
+    <linearGradient
+      id="ref-ai-spectrum-thin-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-close-12.svg

@@ -1,3 +1,5 @@
 <svg viewBox="0 0 13 12" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2.78033 1.21967C2.48744 0.926777 2.01256 0.926777 1.71967 1.21967C1.42678 1.51256 1.42678 1.98744 1.71967 2.28033L5.43934 6L1.71967 9.71967C1.42678 10.0126 1.42678 10.4874 1.71967 10.7803C2.01256 11.0732 2.48744 11.0732 2.78033 10.7803L6.5 7.06066L10.2197 10.7803C10.5126 11.0732 10.9874 11.0732 11.2803 10.7803C11.5732 10.4874 11.5732 10.0126 11.2803 9.71967L7.56066 6L11.2803 2.28033C11.5732 1.98744 11.5732 1.51256 11.2803 1.21967C10.9874 0.926777 10.5126 0.926777 10.2197 1.21967L6.5 4.93934L2.78033 1.21967Z" />
+  <path
+    d="M2.78033 1.21967C2.48744 0.926777 2.01256 0.926777 1.71967 1.21967C1.42678 1.51256 1.42678 1.98744 1.71967 2.28033L5.43934 6L1.71967 9.71967C1.42678 10.0126 1.42678 10.4874 1.71967 10.7803C2.01256 11.0732 2.48744 11.0732 2.78033 10.7803L6.5 7.06066L10.2197 10.7803C10.5126 11.0732 10.9874 11.0732 11.2803 10.7803C11.5732 10.4874 11.5732 10.0126 11.2803 9.71967L7.56066 6L11.2803 2.28033C11.5732 1.98744 11.5732 1.51256 11.2803 1.21967C10.9874 0.926777 10.5126 0.926777 10.2197 1.21967L6.5 4.93934L2.78033 1.21967Z"
+  />
 </svg>

package/dist/svg/icons.svg

@@ -1,5 +1,105 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg">
+  <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>
+    <linearGradient
+      id="ref-ai-spectrum-thin-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>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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>
+    <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>
+    <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>
+    <linearGradient
+      id="ref-ai-spectrum-filled-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>
   <symbol viewBox="0 0 16 16" id="icon-add-16">
     <path
       d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z"
@@ -123,6 +223,56 @@
       d="M10.762 2c.286-1.333 2.19-1.334 2.476 0l.833 3.878a5.277 5.277 0 0 0 4.051 4.051l3.878.833c1.334.286 1.334 2.19 0 2.476l-3.878.833a5.277 5.277 0 0 0-4.051 4.051L13.238 22c-.286 1.334-2.19 1.334-2.476 0l-.833-3.878a5.277 5.277 0 0 0-4.051-4.051L2 13.238c-1.334-.286-1.335-2.19 0-2.476l3.877-.833a5.277 5.277 0 0 0 4.051-4.051L10.762 2Z"
     />
   </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-16-colored">
+    <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)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-ai-spectrum-20-colored">
+    <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)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-ai-spectrum-24-colored">
+    <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)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-filled-16-colored">
+    <path
+      d="M8.788 1.637c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.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.467Z"
+      fill="url(#ref-ai-spectrum-filled-16-colored)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-ai-spectrum-filled-20-colored">
+    <path
+      d="M11.013 1.819c-.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-filled-20-colored)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 24 24" id="icon-ai-spectrum-filled-24-colored">
+    <path
+      d="M13.238 2c-.286-1.333-2.19-1.334-2.476 0l-.833 3.878a5.277 5.277 0 0 1-4.051 4.051L2 10.762c-1.334.286-1.335 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-filled-24-colored)"
+    />
+  </symbol>
+  <symbol viewBox="0 0 16 16" id="icon-ai-spectrum-thin-16-colored">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 4.959A4.86 4.86 0 0 1 4.959 8 4.859 4.859 0 0 1 8 11.041 4.859 4.859 0 0 1 11.041 8 4.859 4.859 0 0 1 8 4.959Zm.788-3.322c-.182-.85-1.394-.85-1.576 0l-.53 2.467a3.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.467Z"
+      fill="url(#ref-ai-spectrum-thin-16-colored)"
+    />
+  </symbol>
   <symbol viewBox="0 0 16 16" id="icon-ai-thin-16">
     <path
       fill-rule="evenodd"

package/dist/tabs/tabs.css

@@ -1,6 +1,6 @@
 .tabs,
 .fake-tabs {
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
 }
 span.tabs,
 span.fake-tabs {
@@ -8,7 +8,7 @@ span.fake-tabs {
 }
 div.tabs__items[role="tablist"],
 ul.fake-tabs__items {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
 }
 ul.fake-tabs__items {
   display: block;
@@ -27,7 +27,8 @@ li.fake-tabs__item {
 }
 div.tabs__item[role="tab"]:not(:last-child),
 li.fake-tabs__item:not(:last-child) {
-  margin-right: 36px;
+  -webkit-margin-end: var(--spacing-450);
+          margin-inline-end: var(--spacing-450);
 }
 li.fake-tabs__item > a {
   padding: 1px 0;
@@ -48,7 +49,7 @@ li.fake-tabs__item > a::after {
   content: "";
   display: block;
   height: 2px;
-  margin-top: 4px;
+  margin-top: var(--spacing-50);
   position: absolute;
   width: 100%;
 }
@@ -78,10 +79,5 @@ li.fake-tabs__item > a:not([aria-current]):hover::after {
 }
 .tabs__cell,
 .fake-tabs__cell {
-  margin: 16px 0;
-}
-[dir="rtl"] .tabs div.tabs__item[role="tab"]:not(:last-child),
-[dir="rtl"] .tabs li.fake-tabs__item:not(:last-child) {
-  margin-left: 40px;
-  margin-right: 0;
+  margin: var(--spacing-200) 0;
 }

package/dist/textbox/textbox.css

@@ -1,6 +1,7 @@
 .textbox {
   color: var(--textbox-foreground-color, var(--color-background-secondary));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
+  /* to align with buttons and select, it needs same font-size */
   position: relative;
 }
 .textbox button.icon-btn {
@@ -20,14 +21,14 @@ textarea.textbox__control {
   font-family: inherit;
   min-height: 200px;
   overflow: auto;
-  padding: 16px;
+  padding: var(--spacing-200);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   resize: vertical;
   vertical-align: middle;
 }
 input.textbox__control {
   font-family: inherit;
-  padding: 0 16px;
+  padding: 0 var(--spacing-200);
   vertical-align: middle;
 }
 input.textbox__control,
@@ -101,10 +102,11 @@ input.textbox__control--large {
 }
 .textbox--icon-end input.textbox__control,
 .textbox--icon-end textarea.textbox__control {
-  padding-right: 40px;
+  -webkit-padding-end: 40px;
+          padding-inline-end: 40px;
 }
 .textbox--icon-end > svg:last-child {
-  right: 16px;
+  right: var(--spacing-200);
 }
 input.textbox__control:not(:read-only):focus,
 textarea.textbox__control:not(:read-only):focus {
@@ -117,31 +119,24 @@ textarea.textbox__control[readonly]:focus {
   text-decoration: underline;
 }
 .textbox > svg:first-child {
-  left: 16px;
+  left: var(--spacing-200);
 }
 .textbox > svg:first-child + input.textbox__control,
 .textbox > svg:first-child + textarea.textbox__control {
-  padding-left: 40px;
+  -webkit-padding-start: 40px;
+          padding-inline-start: 40px;
 }
 .textbox__control--fluid {
   width: 100%;
 }
 [dir="rtl"] .textbox > svg:first-child {
-  right: 16px;
-}
-[dir="rtl"] .textbox > svg:first-child + input.textbox__control,
-[dir="rtl"] .textbox > svg:first-child + textarea.textbox__control {
-  padding-right: 40px;
-}
-[dir="rtl"] .textbox--icon-end input.textbox__control,
-[dir="rtl"] .textbox--icon-end textarea.textbox__control {
-  padding-left: 40px;
+  right: var(--spacing-200);
 }
 [dir="rtl"] .textbox--icon-end button.icon-btn {
   left: 0;
   right: auto;
 }
 [dir="rtl"] .textbox--icon-end > svg:last-child {
-  left: 16px;
+  left: var(--spacing-200);
   right: auto;
 }

package/dist/toast-dialog/toast-dialog.css

@@ -41,7 +41,7 @@
   transform: translateY(110%);
 }
 .toast-dialog__window {
-  margin: 8px 16px 16px;
+  margin: var(--spacing-100) var(--spacing-200) var(--spacing-200);
 }
 .toast-dialog__header {
   align-items: center;
@@ -55,8 +55,9 @@ button.toast-dialog__close {
   align-self: center;
   border: 0;
   color: var(--toast-dialog-foreground-color, var(--color-foreground-on-information));
-  margin: 0 0 0 auto;
-  outline-offset: -8px;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
+  outline-offset: calc(var(--spacing-100) * -1);
   padding: 0;
 }
 button.toast-dialog__close:focus {
@@ -91,7 +92,8 @@ button.toast-dialog__close > svg {
   background-color: transparent;
   color: var(--toast-dialog-foreground-color, var(--color-background-primary));
   font-weight: 700;
-  margin-right: 8px;
+  -webkit-margin-end: var(--spacing-100);
+          margin-inline-end: var(--spacing-100);
 }
 .toast-dialog__footer button.btn--primary:focus,
 .toast-dialog__footer button.btn--secondary:focus {
@@ -121,15 +123,12 @@ button.toast-dialog__close > svg {
 @media (min-width: 512px) {
   .toast-dialog {
     border-radius: var(--toast-dialog-border-radius, var(--border-radius-100));
-    bottom: 16px;
-    left: 16px;
+    bottom: var(--spacing-200);
+    left: var(--spacing-200);
     max-width: 480px;
     width: auto;
   }
   .toast-dialog__window {
-    margin: 16px 24px 24px;
+    margin: var(--spacing-200) var(--spacing-300) var(--spacing-300);
   }
 }
-[dir="rtl"] .toast-dialog__footer .btn--primary {
-  margin-right: 7px;
-}

package/dist/toggle-button/toggle-button.css

@@ -10,18 +10,18 @@
 .toggle-button {
   background-color: var(--color-background-primary);
   border: 1px solid var(--color-stroke-default);
-  border-radius: 8px;
+  border-radius: var(--spacing-100);
   box-shadow: 0 0 0 1px transparent;
   color: var(--color-foreground-primary);
   display: inline-flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   justify-content: center;
-  margin-right: 8px;
+  margin-right: var(--spacing-100);
   margin-top: auto;
   max-width: var(--toggle-button-width-max);
   min-height: var(--toggle-button-height-min);
   min-width: var(--toggle-button-width-min);
-  padding: 0 16px;
+  padding: 0 var(--spacing-200);
   vertical-align: top;
 }
 .toggle-button:focus-visible {
@@ -45,15 +45,15 @@
   text-align: left;
 }
 .toggle-button__icon {
-  margin-bottom: 16px;
-  margin-right: 16px;
-  margin-top: 16px;
+  margin-bottom: var(--spacing-200);
+  margin-right: var(--spacing-200);
+  margin-top: var(--spacing-200);
 }
 .toggle-button__image-container {
   align-self: center;
-  margin-bottom: 16px;
-  margin-right: 16px;
-  margin-top: 16px;
+  margin-bottom: var(--spacing-200);
+  margin-right: var(--spacing-200);
+  margin-top: var(--spacing-200);
 }
 .toggle-button__image-container svg.icon {
   height: 100%;
@@ -69,14 +69,14 @@
   width: 56px;
 }
 .toggle-button__title {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   font-weight: bold;
-  line-height: 1.5rem;
-  margin-bottom: 4px;
-  margin-top: 16px;
+  line-height: var(--font-size-large-2);
+  margin-bottom: var(--spacing-50);
+  margin-top: var(--spacing-200);
 }
 .toggle-button__title:only-child {
-  margin-bottom: 16px;
+  margin-bottom: var(--spacing-200);
 }
 .toggle-button .toggle-button__content:only-child .toggle-button__title:only-child {
   font-weight: bold;
@@ -90,8 +90,8 @@
 }
 .toggle-button__subtitle {
   color: var(--color-foreground-secondary);
-  line-height: 1.25rem;
-  margin-bottom: 16px;
+  line-height: var(--font-size-large-1);
+  margin-bottom: var(--spacing-200);
 }
 .toggle-button__subtitle p {
   margin: 0;

package/dist/toggle-button-group/toggle-button-group.css

@@ -7,10 +7,10 @@
 }
 .toggle-button-group li {
   display: inline-table;
-  margin-bottom: 4px;
-  margin-left: 4px;
-  margin-right: 4px;
-  margin-top: 4px;
+  margin-bottom: var(--spacing-50);
+  margin-left: var(--spacing-50);
+  margin-right: var(--spacing-50);
+  margin-top: var(--spacing-50);
   max-width: var(--toggle-button-width-max);
   min-height: var(--toggle-button-height-min);
   min-width: var(--toggle-button-width-min);

package/dist/tokens/evo-core.css

@@ -86,4 +86,40 @@
     --opacity-100: 0.08;
     --opacity-150: 0.12;
     --opacity-200: 0.16;
+    --font-size-10: 0.625rem;
+    --font-size-12: 0.75rem;
+    --font-size-14: 0.875rem;
+    --font-size-16: 1rem;
+    --font-size-18: 1.125rem;
+    --font-size-20: 1.25rem;
+    --font-size-24: 1.5rem;
+    --font-size-30: 1.875rem;
+    --font-size-36: 2.25rem;
+    --font-size-46: 2.875rem;
+    --font-size-64: 4rem;
+    --font-size-smallest: var(--font-size-10);
+    --font-size-small: var(--font-size-12);
+    --font-size-default: var(--font-size-14);
+    --font-size-medium: var(--font-size-16);
+    --font-size-large-1: var(--font-size-20);
+    --font-size-large-2: var(--font-size-24);
+    --font-size-giant-1: var(--font-size-30);
+    --font-size-giant-2: var(--font-size-36);
+    --font-size-giant-3: var(--font-size-46);
+    --font-size-giant-4: var(--font-size-64);
+    --font-weight-regular: 500;
+    --font-weight-bold: 700;
+    --spacing-25: 2px;
+    --spacing-50: 4px;
+    --spacing-75: 6px;
+    --spacing-100: 8px;
+    --spacing-125: 10px;
+    --spacing-150: 12px;
+    --spacing-200: 16px;
+    --spacing-250: 20px;
+    --spacing-300: 24px;
+    --spacing-400: 32px;
+    --spacing-450: 36px;
+    --spacing-600: 48px;
+    --spacing-800: 64px;
 }

package/dist/tooltip/tooltip.css

@@ -18,7 +18,7 @@ span.tooltip {
   z-index: 1;
   display: none;
   left: -10px;
-  margin-top: 16px;
+  margin-top: var(--spacing-200);
   position: absolute;
 }
 .tooltip__mask {
@@ -33,7 +33,7 @@ span.tooltip__mask {
 }
 .tooltip__cell {
   display: flex;
-  padding: 8px 16px;
+  padding: var(--spacing-100) var(--spacing-200);
   word-break: break-word;
 }
 .tooltip__cell a {
@@ -49,15 +49,15 @@ span.tooltip__mask {
   margin: 0;
 }
 .tooltip__content p:not(:first-of-type) {
-  margin-top: 4px;
+  margin-top: var(--spacing-50);
 }
 button.tooltip__close {
   align-self: flex-start;
   background: none;
   border: 0;
   flex-shrink: 0;
-  height: 32px;
-  margin: -8px -8px 0 8px;
+  height: var(--spacing-400);
+  margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0 var(--spacing-100);
   padding: 0;
   white-space: nowrap;
   width: 32px;

package/dist/tourtip/tourtip.css

@@ -31,7 +31,7 @@ span.tourtip__mask {
 }
 .tourtip__cell {
   display: flex;
-  padding: 16px;
+  padding: var(--spacing-200);
   word-break: break-word;
   flex-wrap: wrap;
 }
@@ -49,15 +49,15 @@ span.tourtip__mask {
   margin: 0;
 }
 .tourtip__content p:not(:first-of-type) {
-  margin-top: 4px;
+  margin-top: var(--spacing-50);
 }
 button.tourtip__close {
   align-self: flex-start;
   background: none;
   border: 0;
   flex-shrink: 0;
-  height: 32px;
-  margin: -8px -8px 0 8px;
+  height: var(--spacing-400);
+  margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0 var(--spacing-100);
   padding: 0;
   white-space: nowrap;
   width: 32px;
@@ -136,9 +136,9 @@ button.tourtip__close > svg {
   top: 12px;
 }
 .tourtip__heading {
-  font-size: 1.25rem;
+  font-size: var(--font-size-large-1);
   font-weight: bold;
-  margin: 0 0 8px;
+  margin: 0 0 var(--spacing-100);
 }
 span.tourtip__heading {
   display: block;