@dialpad/dialtone 9.38.2 → 9.40.0

package/README.md

@@ -2,10 +2,14 @@
 
 The monorepo for Dialpad's design system Dialtone.
 
-All packages of the monorepo are combined into a single Dialtone package for ease of use, however all separate packages of dialtone are also deployed individually. If you would like to use an individual package rather than the combined Dialtone package, you can find documentation for each package in the readme under the respective packages folder. The below usage instructions are for the combined package.
+All separate packages of dialtone are also deployed individually.
+If you would like to use an individual package rather than the combined Dialtone package,
+you can find documentation for each package in the following table.
 
 ## Usage
 
+The below usage instructions are for the combined package.
+
 ### Install it via NPM:
 
 #### Vue 3
@@ -150,6 +154,20 @@ dialtone/
 |--- scripts                      # Shared scripts
 ```
 
+### Available packages
+
+| Name                                                             | Description                                                                                                                                        | Version                                                                                                   |
+|------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
+| [Dialtone](README.md)                                            | Combined package containing the latest versions of the libraries for ease of use                                                                   | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone?logo=npm&color=7C52FF)                  |
+| [Dialtone CSS](packages/dialtone-css/README.md)                  | Classes or styles used within Dialtone should be stored here and documented on our site under `apps/dialtone-documentation`                        | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-css?logo=npm&color=7C52FF)              |
+| [Dialtone emojis](packages/dialtone-emojis/README.md)            | Emoji assets                                                                                                                                       | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-emojis?logo=npm&color=7C52FF)           |
+| [Dialtone icons](packages/dialtone-icons/README.md)              | Resources needed to implement icons on your application that conform to Dialpad’s design principles and best practices                             | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-icons?logo=npm&color=7C52FF)            |
+| [Dialtone tokens](packages/dialtone-tokens/README.md)            | Design tokens for Dialpad's design system Dialtone and everything related to building and publishing them                                          | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-tokens?logo=npm&color=7C52FF)           |
+| [Dialtone vue 2](packages/dialtone-vue2/README.md)               | Vue components library to simplify and standardize the use of common UI patterns and behaviour across all Dialpad projects (compatible with Vue 2) | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-vue?logo=npm&color=7C52FF)              |
+| [Dialtone vue 3](packages/dialtone-vue3/README.md)               | Vue components library to simplify and standardize the use of common UI patterns and behaviour across all Dialpad projects (compatible with Vue 3) | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fdialtone-vue/vue3?logo=npm&color=7C52FF)         |
+| [ESlint plugin](packages/eslint-plugin-dialtone/README.md)       | ESLint plugin containing rules to help developers maintain dialtone recommended practices                                                          | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Feslint-plugin-dialtone?logo=npm&color=7C52FF)    |
+| [Stylelint plugin](packages/stylelint-plugin-dialtone/README.md) | StyleLint plugin containing rules to help developers maintain dialtone recommended practices for CSS                                               | ![NPM Version](https://img.shields.io/npm/v/%40dialpad%2Fstylelint-plugin-dialtone?logo=npm&color=7C52FF) |
+
 ## Contributing
 
 Please read our [contributing guide](.github/CONTRIBUTING.md) **before submitting a pull request**.

package/dist/css/dialtone.css

@@ -1871,6 +1871,44 @@ template {
   width: 100%;
   max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
 }
+.d-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0 auto;
+}
+.d-empty-state--size-sm {
+  width: 50%;
+  padding: var(--dt-space-500);
+}
+.d-empty-state--size-sm h1 {
+  font: var(--dt-typography-headline-md);
+}
+.d-empty-state--size-sm p {
+  font: var(--dt-typography-body-sm);
+}
+.d-empty-state--size-md {
+  width: 70%;
+  padding: var(--dt-space-500);
+}
+.d-empty-state--size-md h1 {
+  font: var(--dt-typography-headline-xl);
+}
+.d-empty-state--size-md p {
+  font: var(--dt-typography-body-sm);
+}
+.d-empty-state--size-lg {
+  width: 100%;
+  padding: var(--dt-space-600);
+}
+.d-empty-state--size-lg h1 {
+  font: var(--dt-typography-headline-xxl);
+}
+.d-empty-state--size-lg p {
+  font: var(--dt-typography-body-md);
+}
 fieldset {
   min-width: 0;
   margin: 0;
@@ -2475,6 +2513,31 @@ legend .d-label {
 .d-link--inverted-disabled:hover {
   cursor: not-allowed;
 }
+.d-link--inverted-danger {
+  --link-color-default: var(--dt-color-link-critical-inverted);
+  --link-color-default-hover: var(--dt-color-link-critical-inverted-hover);
+}
+.d-link--inverted-success {
+  --link-color-default: var(--dt-color-link-success-inverted);
+  --link-color-default-hover: var(--dt-color-link-success-inverted-hover);
+}
+.d-link--inverted-warning {
+  --link-color-default: var(--dt-color-link-warning-inverted);
+  --link-color-default-hover: var(--dt-color-link-warning-inverted-hover);
+}
+.d-link--inverted-muted {
+  --link-color-default: var(--dt-color-link-muted-inverted);
+  --link-color-default-hover: var(--dt-color-link-muted-inverted-hover);
+}
+.d-link--inverted-mention {
+  --link-color-default: var(--dt-color-link-primary-inverted);
+  --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
+  --link-text-decoration: none;
+  --link-padding: 0 var(--dt-space-200);
+  --link-background-color: hsl(var(--dt-color-purple-400-hsl) / 0.2);
+  line-height: var(--dt-font-line-height-200);
+  border-radius: var(--dt-size-radius-200);
+}
 .d-link--mention {
   --link-text-decoration: none;
   --link-padding: 0 var(--dt-space-200);
@@ -3836,6 +3899,11 @@ legend .d-label {
   background-color: var(--tooltip-color-background);
   border-radius: var(--tooltip-border-radius);
 }
+.d-tooltip::after {
+  position: absolute;
+  border: var(--dt-size-350) solid transparent;
+  content: '';
+}
 .d-tooltip--inverted {
   --tooltip-color-background: var(--dt-color-surface-moderate);
   --tooltip-color-text: var(--dt-color-foreground-secondary);
@@ -3859,6 +3927,148 @@ legend .d-label {
   transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms;
   transition: visibility 0s 0s, transform 200ms var(--ttf-in-out) 10ms, opacity 200ms var(--ttf-in-out) 10ms, -webkit-transform 200ms var(--ttf-in-out) 10ms;
 }
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--bottom,
+.d-tooltip__arrow-tippy--bottom-end,
+.d-tooltip__arrow--top-left,
+.d-tooltip__arrow--top-center,
+.d-tooltip__arrow--top-right {
+  top: calc(100% + var(--dt-space-450));
+  -webkit-transform: translateY(var(--dt-space-500));
+          transform: translateY(var(--dt-space-500));
+}
+.d-tooltip__arrow-tippy--bottom-start::after,
+.d-tooltip__arrow-tippy--bottom::after,
+.d-tooltip__arrow-tippy--bottom-end::after,
+.d-tooltip__arrow--top-left::after,
+.d-tooltip__arrow--top-center::after,
+.d-tooltip__arrow--top-right::after {
+  top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
+  border-top-width: 0;
+  border-bottom-color: var(--tooltip-color-background);
+}
+.d-tooltip__arrow-tippy--top-start,
+.d-tooltip__arrow-tippy--top,
+.d-tooltip__arrow-tippy--top-end,
+.d-tooltip__arrow--bottom-left,
+.d-tooltip__arrow--bottom-center,
+.d-tooltip__arrow--bottom-right {
+  bottom: calc(100% + var(--dt-space-450));
+  -webkit-transform: translateY(var(--dt-space-500-negative));
+          transform: translateY(var(--dt-space-500-negative));
+}
+.d-tooltip__arrow-tippy--top-start::after,
+.d-tooltip__arrow-tippy--top::after,
+.d-tooltip__arrow-tippy--top-end::after,
+.d-tooltip__arrow--bottom-left::after,
+.d-tooltip__arrow--bottom-center::after,
+.d-tooltip__arrow--bottom-right::after {
+  bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
+  border-top-color: var(--tooltip-color-background);
+  border-bottom-width: 0;
+}
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--top-start,
+.d-tooltip__arrow--top-left,
+.d-tooltip__arrow--bottom-left {
+  left: var(--dt-space-200-negative);
+}
+.d-tooltip__arrow-tippy--bottom-start::after,
+.d-tooltip__arrow-tippy--top-start::after,
+.d-tooltip__arrow--top-left::after,
+.d-tooltip__arrow--bottom-left::after {
+  left: var(--dt-space-500);
+}
+.d-tooltip__arrow-tippy--bottom::after,
+.d-tooltip__arrow-tippy--top::after,
+.d-tooltip__arrow--top-center::after,
+.d-tooltip__arrow--bottom-center::after {
+  left: 50%;
+  margin-left: var(--dt-space-350-negative);
+}
+.d-tooltip__arrow-tippy--bottom-end,
+.d-tooltip__arrow-tippy--top-end,
+.d-tooltip__arrow--top-right,
+.d-tooltip__arrow--bottom-right {
+  right: var(--dt-space-200-negative);
+}
+.d-tooltip__arrow-tippy--bottom-end::after,
+.d-tooltip__arrow-tippy--top-end::after,
+.d-tooltip__arrow--top-right::after,
+.d-tooltip__arrow--bottom-right::after {
+  right: var(--dt-space-500);
+}
+.d-tooltip__arrow-tippy--left-start,
+.d-tooltip__arrow-tippy--left,
+.d-tooltip__arrow-tippy--left-end,
+.d-tooltip__arrow--right-top,
+.d-tooltip__arrow--right-center,
+.d-tooltip__arrow--right-bottom {
+  right: calc(100% + var(--dt-space-450));
+  -webkit-transform: translateX(var(--dt-space-500-negative));
+          transform: translateX(var(--dt-space-500-negative));
+}
+.d-tooltip__arrow-tippy--left-start::after,
+.d-tooltip__arrow-tippy--left::after,
+.d-tooltip__arrow-tippy--left-end::after,
+.d-tooltip__arrow--right-top::after,
+.d-tooltip__arrow--right-center::after,
+.d-tooltip__arrow--right-bottom::after {
+  right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
+  border-right-width: 0;
+  border-left-color: var(--tooltip-color-background);
+}
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--right,
+.d-tooltip__arrow-tippy--right-end,
+.d-tooltip__arrow--left-top,
+.d-tooltip__arrow--left-center,
+.d-tooltip__arrow--left-bottom {
+  left: calc(100% + var(--dt-space-450));
+  -webkit-transform: translateX(var(--dt-space-500));
+          transform: translateX(var(--dt-space-500));
+}
+.d-tooltip__arrow-tippy--right-start::after,
+.d-tooltip__arrow-tippy--right::after,
+.d-tooltip__arrow-tippy--right-end::after,
+.d-tooltip__arrow--left-top::after,
+.d-tooltip__arrow--left-center::after,
+.d-tooltip__arrow--left-bottom::after {
+  left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative));
+  border-right-color: var(--tooltip-color-background);
+  border-left-width: 0;
+}
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--left-start,
+.d-tooltip__arrow--right-top,
+.d-tooltip__arrow--left-top {
+  top: var(--dt-space-100-negative);
+}
+.d-tooltip__arrow-tippy--right-start::after,
+.d-tooltip__arrow-tippy--left-start::after,
+.d-tooltip__arrow--right-top::after,
+.d-tooltip__arrow--left-top::after {
+  top: var(--dt-space-400);
+}
+.d-tooltip__arrow-tippy--right::after,
+.d-tooltip__arrow-tippy--left::after,
+.d-tooltip__arrow--right-center::after,
+.d-tooltip__arrow--left-center::after {
+  top: 50%;
+  margin-top: var(--dt-space-350-negative);
+}
+.d-tooltip__arrow-tippy--right-end,
+.d-tooltip__arrow-tippy--left-end,
+.d-tooltip__arrow--right-bottom,
+.d-tooltip__arrow--left-bottom {
+  bottom: var(--dt-space-100-negative);
+}
+.d-tooltip__arrow-tippy--right-end::after,
+.d-tooltip__arrow-tippy--left-end::after,
+.d-tooltip__arrow--right-bottom::after,
+.d-tooltip__arrow--left-bottom::after {
+  bottom: var(--dt-space-400);
+}
 .d-toggle {
   --toggle-transition-timing-function: var(--ttf-out-quint);
   --toggle-transition-speed: var(--td300);
@@ -7338,7 +7548,7 @@ body {
 }
 /**
  * Do not edit directly
- * Generated on Wed, 22 May 2024 21:04:44 GMT
+ * Generated on Thu, 30 May 2024 01:11:00 GMT
  */
 
 .dialtone-theme-light {
@@ -8155,7 +8365,7 @@ body {
 
 /**
  * Do not edit directly
- * Generated on Wed, 22 May 2024 21:04:44 GMT
+ * Generated on Thu, 30 May 2024 01:11:01 GMT
  */
 
 .dialtone-theme-dark {