@dialpad/dialtone 8.10.0-version8.1 → 8.10.1-version8.1

package/lib/dist/css/dialtone.css

@@ -1456,62 +1456,62 @@ template {
   height: var(--dt-size-500);
 }
 .d-datepicker {
-  width: calc(var(--size-925) - var(--su24));
-  padding: var(--su16);
+  width: calc(var(--dt-size-925) - var(--dt-size-550));
+  padding: var(--dt-size-500);
 }
 .d-datepicker p {
   display: flex;
   margin: 0;
   font-weight: 400;
-  font-size: var(--su12);
+  font-size: var(--dt-size-450);
   font-family: inherit;
   font-style: normal;
   text-transform: uppercase;
 }
 .d-datepicker--body {
-  padding: 0 var(--su8);
+  padding: 0 var(--dt-size-400);
 }
 .d-datepicker__week-day {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--su16);
+  margin-bottom: var(--dt-size-500);
 }
 .d-datepicker__week-day > div {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--su24);
-  height: var(--su24);
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
 }
 .d-datepicker__week-day > div p {
   margin: 0;
-  color: var(--black-600);
+  color: var(--dt-color-surface-strong);
 }
 .d-datepicker__week {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--size8);
+  margin-bottom: var(--dt-size-400);
 }
 .d-datepicker__day {
-  width: var(--size24);
-  height: var(--size24);
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
   padding: 0;
-  font-size: var(--size12);
+  font-size: var(--dt-size-450);
   background-color: transparent;
   border: none;
-  border-radius: calc(var(--size48) + var(--size2));
+  border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
   cursor: pointer;
 }
 .d-datepicker__day--disabled {
-  color: var(--black-300);
+  color: var(--dt-color-surface-bold);
 }
 .d-datepicker__day--selected {
-  color: #fff;
-  background: #7C52FF;
+  color: var(--dt-color-foreground-primary);
+  background: var(--dt-color-purple-400);
 }
 .d-datepicker__day:focus {
-  box-shadow: var(--bs-focus-ring);
+  box-shadow: var(--dt-shadow-focus);
 }
 .d-datepicker__month-year-picker {
   display: flex;
@@ -1519,7 +1519,7 @@ template {
   justify-content: space-between;
   width: 100%;
   height: 100%;
-  margin-bottom: var(--size20);
+  margin-bottom: var(--dt-size-525);
 }
 .d-datepicker__month-year-picker > div {
   display: inline-flex;
@@ -1528,145 +1528,145 @@ template {
   display: inline-flex;
   align-items: center;
   padding: 0;
-  color: var(--purple-400);
+  color: var(--dt-action-color-foreground-base-default);
   background-color: transparent;
   border: none;
   cursor: pointer;
 }
 .d-emoji-picker {
   flex-direction: column;
-  width: calc(var(--size332) + var(--size32) + var(--size8));
+  width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
   height: 100%;
-  background-color: #FFF;
-  border-radius: var(--size4);
+  background-color: var(--dt-color-surface-primary);
+  border-radius: var(--dt-size-300);
 }
 .d-emoji-picker--header {
   position: relative;
-  padding: var(--su4) var(--su4) 0 var(--su8);
+  padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
 }
 .d-emoji-picker--header::after {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
-  height: var(--size1);
-  background-color: var(--bgc-moderate) !important;
+  height: var(--dt-size-100);
+  background-color: var(--dt-color-surface-moderate) !important;
   content: '';
 }
 .d-emoji-picker__alignment {
   width: auto;
-  max-width: calc(var(--size332) + var(--size8));
-  margin: 0 var(--size16);
+  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+  margin: 0 var(--dt-space-500);
 }
 .d-emoji-picker--footer {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: calc(var(--size48) + var(--size8) + var(--size2));
-  padding: 0 var(--size16);
-  background: #F9F9F9;
-  border-top: var(--size1) solid var(--bc-subtle);
+  height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
+  padding: 0 var(--dt-space-500);
+  background: var(--dt-color-surface-secondary);
+  border-top: var(--dt-size-100) solid var(--dt-color-border-subtle);
 }
 .d-emoji-picker__tabset-list {
-  gap: var(--size4);
+  gap: var(--dt-space-300);
 }
 .d-emoji-picker__tabset-list::after {
-  background-color: var(--black-200) !important;
+  background-color: var(--dt-color-surface-moderate) !important;
 }
 .d-emoji-picker__tabset-list button {
-  padding: var(--space-400);
+  padding: var(--dt-space-400);
 }
 .d-emoji-picker__tabset-list button.d-tab--selected::after {
-  height: var(--size-200);
+  height: var(--dt-size-200);
 }
 .d-emoji-picker__skin-list {
   display: inline-flex;
   flex-direction: row;
-  gap: var(--size4);
+  gap: var(--dt-space-300);
   align-items: flex-start;
-  padding: var(--size4);
+  padding: var(--dt-space-300);
   background: rgba(0, 0, 0, 0.05);
-  border-radius: calc(var(--size32) + var(--size8));
+  border-radius: calc(var(--dt-size-600) + var(--dt-size-400));
 }
 .d-emoji-picker__skin-list button {
-  width: var(--size32);
-  height: var(--size32);
+  width: var(--dt-size-600);
+  height: var(--dt-size-600);
   margin: 0;
   padding: 0;
   background: none;
   border: none;
-  border-radius: calc(var(--size24) + var(--size4));
+  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
   outline: none;
   cursor: pointer;
 }
 .d-emoji-picker__skin-list button:hover {
   background: rgba(0, 0, 0, 0.1);
-  border-radius: calc(var(--size24) + var(--size4));
+  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
 }
 .d-emoji-picker__skin-list button.selected {
-  border: var(--size1) solid rgba(0, 0, 0, 0.25);
-  border-radius: calc(var(--size24) + var(--size4));
+  border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
+  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
 }
 .d-emoji-picker__skin-selected button {
   display: inline-block;
-  width: var(--size42);
-  height: var(--size42);
+  width: var(--dt-size-625);
+  height: var(--dt-size-625);
   margin: 0;
-  padding: calc(var(--size6) + var(--size1));
+  padding: calc(var(--dt-space-350) + var(--dt-space-100));
   background: rgba(0, 0, 0, 0.1);
   border: none;
-  border-radius: calc(var(--size24) + var(--size4));
+  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
   outline: none;
   cursor: pointer;
 }
 .d-emoji-picker__skin-selected button:hover {
-  background: #D2D2D2;
+  background: var(--dt-color-surface-bold);
 }
 .d-emoji-picker__selector {
-  min-height: calc(var(--size264) + var(--size32) + var(--size1));
+  min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
 }
 .d-emoji-picker__selector p {
-  margin-bottom: var(--size4);
+  margin-bottom: var(--dt-space-300);
   font-weight: 700;
-  font-size: var(--size12);
+  font-size: var(--dt-size-450);
   letter-spacing: -0.01em;
 }
 .d-emoji-picker__category {
   position: sticky;
   top: 0;
   width: 100%;
-  padding-top: var(--size20);
-  background: rgba(255, 255, 255, 0.9);
+  padding-top: var(--dt-space-525);
+  background: var(--dt-color-surface-secondary);
 }
 .d-emoji-picker__list {
   position: relative;
   height: 100%;
-  max-height: calc(var(--size264) + var(--size32) + var(--size1));
-  padding-bottom: calc(var(--size4) + var(--size1));
+  max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+  padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
   overflow-x: hidden;
   overflow-y: auto;
 }
 .d-emoji-picker__list div:not(:first-child) p {
-  margin-top: calc(var(--size20) + var(--size2));
+  margin-top: calc(var(--dt-space-525) + var(--dt-space-200));
 }
 .d-emoji-picker__search-label {
-  margin-top: calc(var(--size20));
+  margin-top: calc(var(--dt-space-525));
 }
 .d-emoji-picker__tab {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--size2);
-  width: calc(100% + calc(var(--size16) - var(--size1)));
-  max-width: calc(var(--size332) + var(--size8));
-  margin-left: var(--sun6);
+  gap: var(--dt-space-200);
+  width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
+  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+  margin-left: var(--dt-space-350-negative);
 }
 .d-emoji-picker__tab button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--size32) + var(--size4));
-  height: calc(var(--size32) + var(--size4));
+  width: calc(var(--dt-size-600) + var(--dt-size-300));
+  height: calc(var(--dt-size-600) + var(--dt-size-300));
   margin: 0;
   padding: 0;
   background: none;
@@ -1683,13 +1683,13 @@ template {
   background: rgba(0, 0, 0, 0.1);
 }
 .d-emoji-picker__tab button:focus {
-  box-shadow: var(--bs-focus-ring);
+  box-shadow: var(--dt-shadow-focus);
 }
 .d-emoji-picker__search {
   position: relative;
   z-index: 1;
-  margin: var(--su16) var(--su24) 0 var(--su16);
-  background-color: #FFF;
+  margin: var(--dt-space-500) var(--dt-space-550) 0 var(--dt-space-500);
+  background-color: var(--dt-color-surface-primary);
 }
 .d-emoji-picker__search-button {
   margin: 0;
@@ -1702,10 +1702,10 @@ template {
 }
 .d-emoji-picker__data {
   display: flex;
-  gap: var(--size1);
+  gap: var(--dt-space-100);
   align-items: center;
   width: 100%;
-  max-width: calc(var(--size264) + var(--size24) + var(--size2));
+  max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
 }
 fieldset {
   min-width: 0;
@@ -3885,36 +3885,36 @@ legend .d-label {
   --stack-gap: var(--dt-space-600);
 }
 .dt-item-layout {
-  min-height: calc(var(--size-550) + var(--size-300));
-  padding: var(--space-300) var(--space-400);
-  font-size: var(--fs-200);
-  line-height: var(--lh-300);
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+  padding: var(--dt-space-300) var(--dt-space-400);
+  font-size: var(--dt-font-size-200);
+  line-height: var(--dt-font-line-height-300);
 }
 .dt-item-layout--content {
   flex-grow: 1;
 }
 .dt-item-layout--subtitle {
-  color: var(--fc-tertiary);
-  font-size: var(--fs-100);
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
 }
 .dt-item-layout,
 .dt-item-layout--right,
 .dt-item-layout--left {
   display: flex;
   align-items: center;
-  min-width: var(--size-600);
+  min-width: var(--dt-size-600);
 }
 .dt-item-layout--right {
   align-self: flex-start;
-  padding-left: var(--space-400);
+  padding-left: var(--dt-space-400);
 }
 .dt-item-layout--left {
   align-self: flex-start;
   justify-content: flex-end;
-  padding-right: var(--space-400);
+  padding-right: var(--dt-space-400);
 }
 .dt-item-layout--bottom {
-  margin-top: var(--space-200);
+  margin-top: var(--dt-space-200);
 }
 .d-bga-scroll {
   background-attachment: scroll !important;
@@ -14551,7 +14551,7 @@ body {
   --zi-drawer: 500;
   --zi-modal: 600;
   --zi-modal-element: 650;
-  --zi-zi-notification: 700;
+  --zi-notification: 700;
   --dt-typography-body-small: var(--dt-typography-body-small-font-weight) var(--dt-typography-body-small-font-size)/var(--dt-typography-body-small-line-height) var(--dt-typography-body-small-font-family);
   --dt-typography-body-base: var(--dt-typography-body-base-font-weight) var(--dt-typography-body-base-font-size)/var(--dt-typography-body-base-line-height) var(--dt-typography-body-base-font-family);
   --dt-typography-body-compact-small: var(--dt-typography-body-compact-small-font-weight) var(--dt-typography-body-compact-small-font-size)/var(--dt-typography-body-compact-small-line-height) var(--dt-typography-body-compact-small-font-family);