@dialpad/dialtone 7.0.0-beta.2 → 7.0.0-beta.3

package/lib/dist/css/dialtone.css

@@ -656,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);
@@ -685,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;
@@ -847,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);
@@ -945,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 {
@@ -1123,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);
@@ -1160,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;
@@ -1414,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);
@@ -1730,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;
@@ -1742,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;
 }
@@ -1864,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%);
@@ -1937,9 +1937,6 @@ legend .d-label {
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
 }
-.d-modal__dialog > * + * {
-  margin-top: 1.6rem !important;
-}
 .d-modal[aria-hidden='false'],
 .d-modal[aria-hidden='false'] .d-modal__dialog,
 .d-modal--transparent[aria-hidden='false'],
@@ -1971,7 +1968,7 @@ legend .d-label {
 }
 .d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 .d-modal__close {
@@ -1982,6 +1979,7 @@ legend .d-label {
 }
 .d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);
@@ -2377,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;
@@ -2715,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);
@@ -2776,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 {
@@ -2978,16 +2976,16 @@ 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);
@@ -3253,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);
@@ -12661,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);
 }
@@ -19375,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;
 }
@@ -19827,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;
@@ -19844,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%);
@@ -19854,15 +19827,9 @@ body {
   --input-button__text-size: var(--fs16);
   --input-button__line-height: var(--lh4);
   --input-button__icon-size: 1.8rem;
-  --primary-color-h: var(--purple-400-h);
-  --primary-color-s: var(--purple-400-s);
-  --primary-color-l: var(--purple-400-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-600-h);
-  --nav-background-color-s: var(--purple-600-s);
-  --nav-background-color-l: var(--purple-600-l);
+  --nav-background-color-h: var(--purple-800-h);
+  --nav-background-color-s: var(--purple-800-s);
+  --nav-background-color-l: var(--purple-800-l);
   --nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
   --topbar-height: var(--su64);
   --base--font-size: var(--fs16);
@@ -20537,9 +20504,6 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
 }
-.sm\:d-modal__dialog > * + * {
-  margin-top: 1.6rem !important;
-}
 .sm\:d-modal[aria-hidden='false'],
 .d-modal[aria-hidden='false'] .d-modal__dialog,
 .d-modal--transparent[aria-hidden='false'],
@@ -20571,7 +20535,7 @@ body.theme-dark {
 }
 .sm\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 .sm\:d-modal__close {
@@ -20582,6 +20546,7 @@ body.theme-dark {
 }
 .sm\:d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);
@@ -21992,9 +21957,6 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
 }
-.md\:d-modal__dialog > * + * {
-  margin-top: 1.6rem !important;
-}
 .md\:d-modal[aria-hidden='false'],
 .d-modal[aria-hidden='false'] .d-modal__dialog,
 .d-modal--transparent[aria-hidden='false'],
@@ -22026,7 +21988,7 @@ body.theme-dark {
 }
 .md\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 .md\:d-modal__close {
@@ -22037,6 +21999,7 @@ body.theme-dark {
 }
 .md\:d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);
@@ -23447,9 +23410,6 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
 }
-.lg\:d-modal__dialog > * + * {
-  margin-top: 1.6rem !important;
-}
 .lg\:d-modal[aria-hidden='false'],
 .d-modal[aria-hidden='false'] .d-modal__dialog,
 .d-modal--transparent[aria-hidden='false'],
@@ -23481,7 +23441,7 @@ body.theme-dark {
 }
 .lg\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 .lg\:d-modal__close {
@@ -23492,6 +23452,7 @@ body.theme-dark {
 }
 .lg\:d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);
@@ -24902,9 +24863,6 @@ body.theme-dark {
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
 }
-.xl\:d-modal__dialog > * + * {
-  margin-top: 1.6rem !important;
-}
 .xl\:d-modal[aria-hidden='false'],
 .d-modal[aria-hidden='false'] .d-modal__dialog,
 .d-modal--transparent[aria-hidden='false'],
@@ -24936,7 +24894,7 @@ body.theme-dark {
 }
 .xl\:d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 .xl\:d-modal__close {
@@ -24947,6 +24905,7 @@ body.theme-dark {
 }
 .xl\:d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);