@dialpad/dialtone 6.34.2 → 7.0.0-beta.3

package/lib/dist/css/dialtone.css

@@ -366,14 +366,6 @@ body {
 .d-avatar.d-avatar--lg {
   --avatar--size: var(--su48);
 }
-.d-avatar.d-avatar--purple-800 {
-  --avatar--fc: var(--white);
-  --avatar--bgc: var(--purple-800);
-}
-.d-avatar.d-avatar--purple-700 {
-  --avatar--fc: var(--white);
-  --avatar--bgc: var(--purple-700);
-}
 .d-avatar.d-avatar--purple-600 {
   --avatar--fc: var(--white);
   --avatar--bgc: var(--purple-600);
@@ -383,7 +375,7 @@ body {
   --avatar--bgc: var(--purple-500);
 }
 .d-avatar.d-avatar--purple-400 {
-  --avatar--fc: var(--purple-800);
+  --avatar--fc: var(--white);
   --avatar--bgc: var(--purple-400);
 }
 .d-avatar.d-avatar--purple-300 {
@@ -504,13 +496,13 @@ body {
 .d-badge--purple-300 {
   --badge--bgc: var(--purple-300);
 }
-.d-badge--purple-500 {
-  --badge--bgc: var(--purple-500);
+.d-badge--purple-400 {
+  --badge--bgc: var(--purple-400);
   --badge--fc: var(--white);
 }
-.d-badge--purple-700 {
+.d-badge--purple-500 {
   --badge--fc: var(--white);
-  --badge--bgc: var(--purple-700);
+  --badge--bgc: var(--purple-500);
 }
 .d-badge--orange-400 {
   --badge--bgc: var(--orange-400);
@@ -607,7 +599,7 @@ body {
   --banner--bgc: var(--purple-100);
 }
 .d-banner--info.d-banner--important {
-  --banner--bgc: var(--purple-500);
+  --banner--bgc: var(--purple-400);
   --banner--fc: var(--white);
 }
 .d-banner--success {
@@ -664,7 +656,7 @@ body {
   color: var(--inverted-color);
 }
 .d-btn {
-  --button--fc: var(--primary-color);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --button--bgc: transparent;
   --button--bc: transparent;
   --button--br: var(--base--corner-radius);
@@ -693,14 +685,14 @@ body {
   fill: currentColor;
 }
 .d-btn:hover {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  3%);
 }
 .d-btn:active,
 .d-btn.d-btn--active,
 .d-btn.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  9%);
 }
 .d-btn.focus-visible {
   outline: none;
@@ -855,21 +847,21 @@ body {
   --button--br: var(--br-circle);
 }
 .d-btn--outlined {
-  --button--bc: var(--primary-color);
+  --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 .d-btn--primary {
   --button--fc: var(--white);
-  --button--bgc: var(--primary-color);
+  --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 .d-btn--primary:hover {
   --button--fc: var(--white);
-  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+  --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
 }
 .d-btn--primary:active,
 .d-btn--primary.d-btn--active,
 .d-btn--primary.d-btn--active:active {
   --button--fc: var(--white);
-  --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+  --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
 }
 .d-btn--muted {
   --button--fc: var(--muted-color);
@@ -953,17 +945,17 @@ body {
   --button--bc: var(--white);
 }
 .d-btn--inverted.d-btn--primary {
-  --button--fc: var(--primary-color);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 }
 .d-btn--inverted.d-btn--primary:hover {
-  --button--fc: var(--primary-color-hover);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
   --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
 }
 .d-btn--inverted.d-btn--primary:active,
 .d-btn--inverted.d-btn--primary.d-btn--active,
 .d-btn--inverted.d-btn--primary.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
   --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
 }
 .d-btn--icon-only {
@@ -1131,7 +1123,7 @@ body {
   height: 1.8rem;
 }
 .d-chip__close {
-  --button--fc: var(--primary-color);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --button--bgc: transparent;
   --button--bc: transparent;
   --button--br: var(--base--corner-radius);
@@ -1168,14 +1160,14 @@ body {
   border-width: var(--su0);
 }
 .d-chip__close:hover {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  3%);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  3%);
 }
 .d-chip__close:active,
 .d-chip__close.d-btn--active,
 .d-chip__close.d-btn--active:active {
-  --button--fc: var(--primary-color-hover);
-  --button--bgc: hsla(var(--primary-color-hsl)  /  9%);
+  --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+  --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  9%);
 }
 .d-chip__close.focus-visible {
   outline: none;
@@ -1422,7 +1414,7 @@ legend .d-label {
 }
 .d-input,
 .d-textarea {
-  --input--focus-bc: var(--primary-color);
+  --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --input--bc: var(--black-500);
   --input--bgc: var(--white);
   --input--fc: var(--black-800);
@@ -1738,7 +1730,7 @@ legend .d-label {
   box-sizing: border-box;
   margin: var(--su0);
   padding: var(--su0);
-  color: var(--primary-color);
+  color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   font: inherit;
   text-decoration: underline;
   background-color: transparent;
@@ -1750,7 +1742,7 @@ legend .d-label {
   fill: currentColor;
 }
 .d-link:hover {
-  color: var(--primary-color-hover);
+  color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
   text-decoration: none;
   cursor: pointer;
 }
@@ -1872,15 +1864,15 @@ legend .d-label {
 }
 .d-list-group--link:hover {
   color: var(--black-900);
-  background-color: hsla(var(--primary-color-hsl)  /  85%);
+  background-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  85%);
 }
 .d-list-group--link-selected {
   color: var(--white);
-  background-color: var(--primary-color);
+  background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 .d-list-group--link-selected:hover {
   color: var(--white);
-  background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
+  background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
 }
 .d-modal {
   --modal--bgc: hsla(var(--black-900-hsl)  /  85%);
@@ -2150,7 +2142,7 @@ legend .d-label {
   --toast--fc: var(--fc-dark);
 }
 .d-toast--info.d-toast--important {
-  --toast--bgc: var(--purple-500);
+  --toast--bgc: var(--purple-400);
   --toast--fc: var(--white);
 }
 .d-toast--success {
@@ -2284,7 +2276,7 @@ legend .d-label {
 .d-notice--info.d-toast--important,
 .d-banner--info.d-toast--important,
 .d-toast--info.d-toast--important {
-  --notice--bgc: var(--purple-500);
+  --notice--bgc: var(--purple-400);
   --notice--fc: var(--white);
 }
 .d-notice--success,
@@ -2383,7 +2375,7 @@ legend .d-label {
 }
 .d-checkbox,
 .d-radio {
-  --check-radio--color: var(--primary-color);
+  --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --check-radio--bc: var(--black-500);
   --check-radio--bgc: var(--white);
   flex: 0 auto;
@@ -2721,7 +2713,7 @@ legend .d-label {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  --input--focus-bc: var(--primary-color);
+  --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   --input--bc: var(--black-500);
   --input--bgc: var(--white);
   --input--fc: var(--black-800);
@@ -2782,7 +2774,7 @@ legend .d-label {
   cursor: not-allowed;
 }
 .d-select__input:focus {
-  --select--bc: var(--primary-color);
+  --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   box-shadow: var(--bs-focus-ring);
 }
 .d-select__input:disabled {
@@ -2984,22 +2976,22 @@ legend .d-label {
   }
 }
 .d-tab--selected {
-  --tab--fc: var(--primary-color);
+  --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
   z-index: var(--zi-selected);
 }
 .d-tab--selected:hover {
-  --tab--bgc: hsla(var(--primary-color-hsl)  /  10%);
-  --tab--fc: var(--primary-color-hover);
+  --tab--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  10%);
+  --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
 }
 .d-tab--selected::after,
 .d-tab--selected:hover::after {
-  --tab--bgc: var(--primary-color);
+  --tab--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 .d-tablist--inverted {
   --tab--fc: var(--white);
 }
 .d-tablist--inverted::after {
-  background-color: hsla(var(--purple-800-hsl)  /  50%);
+  background-color: hsla(var(--purple-600-hsl)  /  50%);
 }
 .d-tablist--inverted .d-tab {
   --tab--fc: var(--white);
@@ -3259,7 +3251,7 @@ legend .d-label {
   box-shadow: var(--bs-focus-ring);
 }
 .d-toggle--checked {
-  --toggle-bc: var(--primary-color);
+  --toggle-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 .d-toggle--checked .d-toggle__inner {
   left: var(--su6);
@@ -6316,130 +6308,6 @@ body.theme-dark .d\:d-bgg-to-black-025 {
   --bgg-to-opacity: 100%;
   --bgg-to: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l)  /  var(--bgg-to-opacity)) !important;
 }
-.d-bgg-from-purple-800,
-.h\:d-bgg-from-purple-800:hover,
-.f\:d-bgg-from-purple-800:focus {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-}
-.f\:d-bgg-from-purple-800:focus-within {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-}
-.fv\:d-bgg-from-purple-800.focus-visible {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-}
-.fv\:d-bgg-from-purple-800:focus-visible {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgg-from-purple-800 {
-    --bgg-from-opacity: 100%;
-    --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-    --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-  }
-}
-body.theme-dark .d\:d-bgg-from-purple-800 {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  0%);
-}
-.d-bgg-to-purple-800,
-.h\:d-bgg-to-purple-800:hover,
-.f\:d-bgg-to-purple-800:focus {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-}
-.f\:d-bgg-to-purple-800:focus-within {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-}
-.fv\:d-bgg-to-purple-800.focus-visible {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-}
-.fv\:d-bgg-to-purple-800:focus-visible {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgg-to-purple-800 {
-    --bgg-to-opacity: 100%;
-    --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-  }
-}
-body.theme-dark .d\:d-bgg-to-purple-800 {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgg-to-opacity)) !important;
-}
-.d-bgg-from-purple-700,
-.h\:d-bgg-from-purple-700:hover,
-.f\:d-bgg-from-purple-700:focus {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-}
-.f\:d-bgg-from-purple-700:focus-within {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-}
-.fv\:d-bgg-from-purple-700.focus-visible {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-}
-.fv\:d-bgg-from-purple-700:focus-visible {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgg-from-purple-700 {
-    --bgg-from-opacity: 100%;
-    --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-    --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-  }
-}
-body.theme-dark .d\:d-bgg-from-purple-700 {
-  --bgg-from-opacity: 100%;
-  --bgg-from: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-from-opacity));
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  0%);
-}
-.d-bgg-to-purple-700,
-.h\:d-bgg-to-purple-700:hover,
-.f\:d-bgg-to-purple-700:focus {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-}
-.f\:d-bgg-to-purple-700:focus-within {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-}
-.fv\:d-bgg-to-purple-700.focus-visible {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-}
-.fv\:d-bgg-to-purple-700:focus-visible {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgg-to-purple-700 {
-    --bgg-to-opacity: 100%;
-    --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-  }
-}
-body.theme-dark .d\:d-bgg-to-purple-700 {
-  --bgg-to-opacity: 100%;
-  --bgg-to: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgg-to-opacity)) !important;
-}
 .d-bgg-from-pink-700,
 .h\:d-bgg-from-pink-700:hover,
 .f\:d-bgg-from-pink-700:focus {
@@ -8053,23 +7921,7 @@ body.theme-dark .d\:d-bgc-purple-600 {
 }
 .d-fc-purple-500,
 .h\:d-fc-purple-500:hover,
-.f\:d-fc-purple-500:focus,
-.d-fc-purple,
-.h\:d-fc-purple:hover,
-.f\:d-fc-purple:focus,
-.f\:d-fc-purple:focus-within,
-.fv\:d-fc-purple.focus-visible {
-  --fco: 100%;
-  color: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l)  /  var(--fco)) !important;
-}
-.d-fc-purple-500,
-.h\:d-fc-purple-500:hover,
-.f\:d-fc-purple-500:focus,
-.d-fc-purple,
-.h\:d-fc-purple:hover,
-.f\:d-fc-purple:focus,
-.f\:d-fc-purple:focus-within,
-.fv\:d-fc-purple:focus-visible {
+.f\:d-fc-purple-500:focus {
   --fco: 100%;
   color: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l)  /  var(--fco)) !important;
 }
@@ -8167,7 +8019,23 @@ body.theme-dark .d\:d-bgc-purple-500 {
 }
 .d-fc-purple-400,
 .h\:d-fc-purple-400:hover,
-.f\:d-fc-purple-400:focus {
+.f\:d-fc-purple-400:focus,
+.d-fc-purple,
+.h\:d-fc-purple:hover,
+.f\:d-fc-purple:focus,
+.f\:d-fc-purple:focus-within,
+.fv\:d-fc-purple.focus-visible {
+  --fco: 100%;
+  color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  var(--fco)) !important;
+}
+.d-fc-purple-400,
+.h\:d-fc-purple-400:hover,
+.f\:d-fc-purple-400:focus,
+.d-fc-purple,
+.h\:d-fc-purple:hover,
+.f\:d-fc-purple:focus,
+.f\:d-fc-purple:focus-within,
+.fv\:d-fc-purple:focus-visible {
   --fco: 100%;
   color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  var(--fco)) !important;
 }
@@ -12497,202 +12365,6 @@ body.theme-dark .d\:d-bgc-pink-700 {
   --bgo: 100%;
   background-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l)  /  var(--bgo)) !important;
 }
-.d-fc-purple-800,
-.h\:d-fc-purple-800:hover,
-.f\:d-fc-purple-800:focus {
-  --fco: 100%;
-  color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-}
-.f\:d-fc-purple-800:focus-within {
-  --fco: 100%;
-  color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-purple-800.focus-visible {
-  --fco: 100%;
-  color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-purple-800:focus-visible {
-  --fco: 100%;
-  color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-fc-purple-800 {
-    --fco: 100%;
-    color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-  }
-}
-body.theme-dark .d\:d-fc-purple-800 {
-  --fco: 100%;
-  color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--fco)) !important;
-}
-.d-bc-purple-800,
-.h\:d-bc-purple-800:hover,
-.f\:d-bc-purple-800:focus {
-  --bco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-}
-.f\:d-bc-purple-800:focus-within {
-  --bco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-}
-.fv\:d-bc-purple-800.focus-visible {
-  --bco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-}
-.fv\:d-bc-purple-800:focus-visible {
-  --bco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bc-purple-800 {
-    --bco: 100%;
-    border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-  }
-}
-body.theme-dark .d\:d-bc-purple-800 {
-  --bco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bco)) !important;
-}
-.d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-divide-purple-800 > * + * {
-    --dco: 100%;
-    border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-  }
-}
-body.theme-dark .d\:d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-.d-bgc-purple-800,
-.h\:d-bgc-purple-800:hover,
-.f\:d-bgc-purple-800:focus {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-}
-.f\:d-bgc-purple-800:focus-within {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-}
-.fv\:d-bgc-purple-800.focus-visible {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-}
-.fv\:d-bgc-purple-800:focus-visible {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgc-purple-800 {
-    --bgo: 100%;
-    background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-  }
-}
-body.theme-dark .d\:d-bgc-purple-800 {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--bgo)) !important;
-}
-.d-fc-purple-700,
-.h\:d-fc-purple-700:hover,
-.f\:d-fc-purple-700:focus {
-  --fco: 100%;
-  color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-}
-.f\:d-fc-purple-700:focus-within {
-  --fco: 100%;
-  color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-purple-700.focus-visible {
-  --fco: 100%;
-  color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-purple-700:focus-visible {
-  --fco: 100%;
-  color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-fc-purple-700 {
-    --fco: 100%;
-    color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-  }
-}
-body.theme-dark .d\:d-fc-purple-700 {
-  --fco: 100%;
-  color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--fco)) !important;
-}
-.d-bc-purple-700,
-.h\:d-bc-purple-700:hover,
-.f\:d-bc-purple-700:focus {
-  --bco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-}
-.f\:d-bc-purple-700:focus-within {
-  --bco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-}
-.fv\:d-bc-purple-700.focus-visible {
-  --bco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-}
-.fv\:d-bc-purple-700:focus-visible {
-  --bco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bc-purple-700 {
-    --bco: 100%;
-    border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-  }
-}
-body.theme-dark .d\:d-bc-purple-700 {
-  --bco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bco)) !important;
-}
-.d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-divide-purple-700 > * + * {
-    --dco: 100%;
-    border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-  }
-}
-body.theme-dark .d\:d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
-.d-bgc-purple-700,
-.h\:d-bgc-purple-700:hover,
-.f\:d-bgc-purple-700:focus {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-}
-.f\:d-bgc-purple-700:focus-within {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-}
-.fv\:d-bgc-purple-700.focus-visible {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-}
-.fv\:d-bgc-purple-700:focus-visible {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-system .d\:d-bgc-purple-700 {
-    --bgo: 100%;
-    background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-  }
-}
-body.theme-dark .d\:d-bgc-purple-700 {
-  --bgo: 100%;
-  background-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--bgo)) !important;
-}
 .d-fc-yellow-050,
 .h\:d-fc-yellow-050:hover,
 .f\:d-fc-yellow-050:focus {
@@ -12987,24 +12659,6 @@ body.theme-dark .d\:d-bgc-red-700 {
   --bgo: 100%;
   background-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l)  /  var(--bgo)) !important;
 }
-.d-fc-primary {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
-.h\:d-fc-primary:hover {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
-.f\:d-fc-primary:focus {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
-.f\:d-fc-primary:focus-within {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-primary.focus-visible {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
-.fv\:d-fc-primary:focus-visible {
-  color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  /  var(--fco)) !important;
-}
 .d-fc-warning {
   color: var(--fc-warning);
 }
@@ -19701,12 +19355,6 @@ body {
 .d-svg.d-svg--system {
   fill: currentColor;
 }
-.d-svg-primary--stroke {
-  stroke: var(--primary-color);
-}
-.d-svg-primary--fill {
-  fill: var(--primary-color);
-}
 .js-focus-visible :focus:not(.focus-visible) {
   outline: none;
 }
@@ -19779,46 +19427,36 @@ body {
   --black-900-l: 5.29411765%;
   --black-900-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
   --black-900: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) /  var(--alpha, 100%));
-  --purple-100-h: 262;
+  --purple-100-h: 260.76923077;
   --purple-100-s: 100%;
-  --purple-100-l: 94.11764706%;
+  --purple-100-l: 94.90196078%;
   --purple-100-hsl: var(--purple-100-h) var(--purple-100-s) var(--purple-100-l);
   --purple-100: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) /  var(--alpha, 100%));
-  --purple-200-h: 256.19047619;
+  --purple-200-h: 260.59701493;
   --purple-200-s: 100%;
-  --purple-200-l: 87.64705882%;
+  --purple-200-l: 86.8627451%;
   --purple-200-hsl: var(--purple-200-h) var(--purple-200-s) var(--purple-200-l);
   --purple-200: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) /  var(--alpha, 100%));
-  --purple-300-h: 255.5;
+  --purple-300-h: 260.93023256;
   --purple-300-s: 100%;
-  --purple-300-l: 76.47058824%;
+  --purple-300-l: 74.70588235%;
   --purple-300-hsl: var(--purple-300-h) var(--purple-300-s) var(--purple-300-l);
   --purple-300: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) /  var(--alpha, 100%));
-  --purple-400-h: 254.80519481;
+  --purple-400-h: 254.56647399;
   --purple-400-s: 100%;
-  --purple-400-l: 69.80392157%;
+  --purple-400-l: 66.07843137%;
   --purple-400-hsl: var(--purple-400-h) var(--purple-400-s) var(--purple-400-l);
   --purple-400: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) /  var(--alpha, 100%));
-  --purple-500-h: 254.53608247;
-  --purple-500-s: 100%;
-  --purple-500-l: 61.96078431%;
+  --purple-500-h: 254.5;
+  --purple-500-s: 67.41573034%;
+  --purple-500-l: 34.90196078%;
   --purple-500-hsl: var(--purple-500-h) var(--purple-500-s) var(--purple-500-l);
   --purple-500: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) /  var(--alpha, 100%));
-  --purple-600-h: 254.87603306;
-  --purple-600-s: 68.36158192%;
-  --purple-600-l: 34.70588235%;
+  --purple-600-h: 260;
+  --purple-600-s: 91.30434783%;
+  --purple-600-l: 9.01960784%;
   --purple-600-hsl: var(--purple-600-h) var(--purple-600-s) var(--purple-600-l);
   --purple-600: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) /  var(--alpha, 100%));
-  --purple-700-h: 255.30612245;
-  --purple-700-s: 74.24242424%;
-  --purple-700-l: 25.88235294%;
-  --purple-700-hsl: var(--purple-700-h) var(--purple-700-s) var(--purple-700-l);
-  --purple-700: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) /  var(--alpha, 100%));
-  --purple-800-h: 255.23809524;
-  --purple-800-s: 84%;
-  --purple-800-l: 14.70588235%;
-  --purple-800-hsl: var(--purple-800-h) var(--purple-800-s) var(--purple-800-l);
-  --purple-800: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) /  var(--alpha, 100%));
   --orange-100-h: 25.38461538;
   --orange-100-s: 100%;
   --orange-100-l: 94.90196078%;
@@ -20151,7 +19789,7 @@ body {
   --fc-medium: var(--black-800);
   --fc-light: var(--black-700);
   --fc-lighter: var(--black-600);
-  --fc-purple: var(--purple-500);
+  --fc-purple: var(--purple-400);
   --fc-orange: var(--orange-600);
   --fc-pink: var(--pink-600);
   --fc-green: var(--green-600);
@@ -20163,7 +19801,6 @@ body {
   --fc-warning: hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 20%)  /  var(--alpha, 100%));
   --fc-warning-hover: hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 30%)  /  var(--alpha, 100%));
   --fc-muted: var(--black-900);
-  --fc-primary: var(--primary-color);
   --base--text-color: var(--black-900);
   --base--background-color: var(--white);
   --zi-hide: -1;
@@ -20180,7 +19817,7 @@ body {
   --zi-modal: 600;
   --zi-modal-element: 650;
   --zi-notification: 700;
-  --focus-ring: hsla(var(--primary-color-hsl)  /  75%);
+  --focus-ring: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l)  /  75%);
   --focus-ring-success: hsla(var(--success-color-hsl)  /  75%);
   --focus-ring-warning: hsla(var(--warning-color-hsl)  /  75%);
   --focus-ring-error: hsla(var(--error-color-hsl)  /  75%);
@@ -20190,12 +19827,6 @@ body {
   --input-button__text-size: var(--fs16);
   --input-button__line-height: var(--lh4);
   --input-button__icon-size: 1.8rem;
-  --primary-color-h: var(--purple-500-h);
-  --primary-color-s: var(--purple-500-s);
-  --primary-color-l: var(--purple-500-l);
-  --primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
-  --primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
-  --primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
   --nav-background-color-h: var(--purple-800-h);
   --nav-background-color-s: var(--purple-800-s);
   --nav-background-color-l: var(--purple-800-l);
@@ -20273,46 +19904,36 @@ body.theme-dark {
   --black-900-l: 100%;
   --black-900-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
   --black-900: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) /  var(--alpha, 100%));
-  --purple-100-h: 255.23809524;
-  --purple-100-s: 84%;
-  --purple-100-l: 14.70588235%;
+  --purple-100-h: 260;
+  --purple-100-s: 91.30434783%;
+  --purple-100-l: 9.01960784%;
   --purple-100-hsl: var(--purple-100-h) var(--purple-100-s) var(--purple-100-l);
   --purple-100: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) /  var(--alpha, 100%));
-  --purple-200-h: 255.30612245;
-  --purple-200-s: 74.24242424%;
-  --purple-200-l: 25.88235294%;
+  --purple-200-h: 254.5;
+  --purple-200-s: 67.41573034%;
+  --purple-200-l: 34.90196078%;
   --purple-200-hsl: var(--purple-200-h) var(--purple-200-s) var(--purple-200-l);
   --purple-200: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) /  var(--alpha, 100%));
-  --purple-300-h: 254.87603306;
-  --purple-300-s: 68.36158192%;
-  --purple-300-l: 34.70588235%;
+  --purple-300-h: 254.56647399;
+  --purple-300-s: 100%;
+  --purple-300-l: 66.07843137%;
   --purple-300-hsl: var(--purple-300-h) var(--purple-300-s) var(--purple-300-l);
   --purple-300: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) /  var(--alpha, 100%));
-  --purple-400-h: 254.53608247;
+  --purple-400-h: 260.93023256;
   --purple-400-s: 100%;
-  --purple-400-l: 61.96078431%;
+  --purple-400-l: 74.70588235%;
   --purple-400-hsl: var(--purple-400-h) var(--purple-400-s) var(--purple-400-l);
   --purple-400: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) /  var(--alpha, 100%));
-  --purple-500-h: 254.80519481;
+  --purple-500-h: 260.59701493;
   --purple-500-s: 100%;
-  --purple-500-l: 69.80392157%;
+  --purple-500-l: 86.8627451%;
   --purple-500-hsl: var(--purple-500-h) var(--purple-500-s) var(--purple-500-l);
   --purple-500: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) /  var(--alpha, 100%));
-  --purple-600-h: 255.5;
+  --purple-600-h: 260.76923077;
   --purple-600-s: 100%;
-  --purple-600-l: 76.47058824%;
+  --purple-600-l: 94.90196078%;
   --purple-600-hsl: var(--purple-600-h) var(--purple-600-s) var(--purple-600-l);
   --purple-600: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) /  var(--alpha, 100%));
-  --purple-700-h: 256.19047619;
-  --purple-700-s: 100%;
-  --purple-700-l: 87.64705882%;
-  --purple-700-hsl: var(--purple-700-h) var(--purple-700-s) var(--purple-700-l);
-  --purple-700: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) /  var(--alpha, 100%));
-  --purple-800-h: 262;
-  --purple-800-s: 100%;
-  --purple-800-l: 94.11764706%;
-  --purple-800-hsl: var(--purple-800-h) var(--purple-800-s) var(--purple-800-l);
-  --purple-800: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) /  var(--alpha, 100%));
   --orange-100-h: 25.26315789;
   --orange-100-s: 74.02597403%;
   --orange-100-l: 15.09803922%;
@@ -20757,14 +20378,6 @@ body.theme-dark {
   --dco: 100%;
   border-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l)  /  var(--dco)) !important;
 }
-.sm\:d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-.sm\:d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
 .sm\:d-divide-yellow-050 > * + * {
   --dco: 100%;
   border-color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l)  /  var(--dco)) !important;
@@ -22218,14 +21831,6 @@ body.theme-dark {
   --dco: 100%;
   border-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l)  /  var(--dco)) !important;
 }
-.md\:d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-.md\:d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
 .md\:d-divide-yellow-050 > * + * {
   --dco: 100%;
   border-color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l)  /  var(--dco)) !important;
@@ -23679,14 +23284,6 @@ body.theme-dark {
   --dco: 100%;
   border-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l)  /  var(--dco)) !important;
 }
-.lg\:d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-.lg\:d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
 .lg\:d-divide-yellow-050 > * + * {
   --dco: 100%;
   border-color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l)  /  var(--dco)) !important;
@@ -25140,14 +24737,6 @@ body.theme-dark {
   --dco: 100%;
   border-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l)  /  var(--dco)) !important;
 }
-.xl\:d-divide-purple-800 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l)  /  var(--dco)) !important;
-}
-.xl\:d-divide-purple-700 > * + * {
-  --dco: 100%;
-  border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l)  /  var(--dco)) !important;
-}
 .xl\:d-divide-yellow-050 > * + * {
   --dco: 100%;
   border-color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l)  /  var(--dco)) !important;