@dialpad/dialtone 8.22.1 → 9.0.1

package/lib/build/less/components/link.less

@@ -1,130 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: LINKS
-//
-//  These are link classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/links
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • ALTERNATE STYLES
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-link {
-    --link-color-default: var(--dt-color-link-primary);
-    --link-color-default-hover: var(--dt-color-link-primary-hover);
-    --link-text-decoration: underline;
-
-    position: relative;
-    display: inline-flex;
-    gap: var(--dt-space-300);
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: var(--link-color-default);
-    font: inherit;
-    text-decoration: var(--link-text-decoration);
-    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
-    text-decoration-thickness: var(--dt-size-border-100);
-    background-color: transparent;
-    border: 0;
-    transition-timing-function: var(--ttf-out-quint);
-    transition-duration: var(--td200);
-    transition-property: background-color, border, box-shadow;
-
-    //  Reset button appearance
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    fill: currentColor;
-
-    &:hover {
-        --link-text-decoration: none;
-
-        color: var(--link-color-default-hover);
-        cursor: pointer;
-    }
-
-    &:active {
-        --link-text-decoration: underline;
-    }
-
-    &:focus-visible {
-        --link-text-decoration: none;
-
-        outline: none;
-        box-shadow: var(--dt-shadow-focus);
-    }
-
-    //  ============================================================================
-    //  $   ALTERNATE STYLES
-    //  ============================================================================
-    //  $$  WARNING
-    //  ----------------------------------------------------------------------------
-    &--warning {
-        --link-color-default: var(--dt-color-link-warning);
-        --link-color-default-hover: var(--dt-color-link-warning-hover);
-    }
-
-    //  $$  DANGER
-    //  ----------------------------------------------------------------------------
-    &--danger {
-        --link-color-default: var(--dt-color-link-critical);
-        --link-color-default-hover: var(--dt-color-link-critical-hover);
-    }
-
-    //  $$  SUCCESS
-    //  ----------------------------------------------------------------------------
-    &--success {
-        --link-color-default: var(--dt-color-link-success);
-        --link-color-default-hover: var(--dt-color-link-success-hover);
-    }
-
-    //  $$  MUTED
-    //  ----------------------------------------------------------------------------
-    &--muted {
-        --link-color-default: var(--dt-color-link-muted);
-        --link-color-default-hover: var(--dt-color-link-muted-hover);
-    }
-
-    //  $$  DISABLED
-    //  ----------------------------------------------------------------------------
-    // We don't expose these in the documentation because they're meant to be consumed
-    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
-    &[disabled],
-    &--disabled {
-        --link-color-default: var(--dt-color-link-disabled);
-        --link-color-default-hover: var(--dt-color-link-disabled-hover);
-        --link-text-decoration: none;
-
-        &:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    //  $$  INVERTED
-    //  ----------------------------------------------------------------------------
-    &--inverted {
-        --link-color-default: var(--dt-color-link-primary-inverted);
-        --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
-    }
-
-    //  $$  INVERTED DISABLED
-    //  ----------------------------------------------------------------------------
-    // We don't expose these in the documentation because they're meant to be consumed
-    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
-    &--inverted-disabled {
-        --link-color-default: var(--dt-color-link-disabled-inverted);
-        --link-color-default-hover: var(--dt-color-link-disabled-inverted-hover);
-        --link-text-decoration: none !important;
-
-        &:hover {
-            cursor: not-allowed;
-        }
-    }
-}

package/lib/build/less/components/list-group.less

@@ -1,48 +0,0 @@
-//
-//  DIALTONE 5 SHIM
-//  COMPONENTS: LIST GROUPS
-//
-//  These are the list group definitions, which are used by classes or can be
-//  used within Vue components. For further documentation of these values,
-//  please visit https://dialpad.design/components/list-groups
-//
-//  ============================================================================
-.d-list-group,
-.d-list-group__item {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.d-list-group--header,
-.d-list-group--link {
-    display: block;
-    padding: var(--dt-space-300) var(--dt-space-550); // 4 24
-}
-
-.d-list-group--header {
-    font-weight: var(--dt-font-weight-bold);
-    font-size: var(--dt-font-size-100);
-    text-transform: uppercase;
-}
-
-.d-list-group--link {
-    color: var(--dt-color-black-800);
-    font-size: var(--dt-font-size-200);
-    text-decoration: none;
-
-    &:hover {
-        color: var(--dt-color-black-900);
-        background-color: hsla(var(--dt-color-purple-400-hsl) ~' / ' 85%);
-    }
-
-    &-selected {
-        color: var(--dt-color-neutral-white);
-        background-color: var(--dt-color-purple-400);
-
-        &:hover {
-            color: var(--dt-color-neutral-white);
-            background-color: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) + 10%));
-        }
-    }
-}

package/lib/build/less/components/list-item-group.less

@@ -1,17 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: List Item Group
-//
-//  These are the styles for List Item Group component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-list-item-group {
-  position: relative;
-  padding-right: var(--dt-space-0);
-  padding-left: var(--dt-space-0);
-}

package/lib/build/less/components/modal.less

@@ -1,340 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: MODALS
-//
-//  These are modal classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/modals
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLES
-//    - Wrapper
-//    - Dialog
-//    - Make them appear
-//  • MODAL BACKGROUND
-//  • HEADER
-//  • CONTENT
-//  • FOOTER
-//  • TRANSITIONS
-//
-//  ============================================================================
-//  $   BASE STYLES
-//  ============================================================================
-//  $$  WRAPPER
-//  ----------------------------------------------------------------------------
-.d-modal {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
-    --modal-dialog-padding: var(--dt-space-600);
-    --modal-dialog-color-background: var(--dt-color-surface-primary);
-    --modal-dialog-color-border: var(--dt-color-border-subtle);
-    --modal-dialog-color-text: var(--dt-color-foreground-primary);
-    --modal-header-color-text: var(--dt-color-foreground-primary);
-    --modal-dialog-shadow: var(--dt-shadow-large);
-
-    position: fixed;
-    inset: 0;
-    z-index: var(--zi-hide);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--dt-space-600); // 32
-    background-color: var(--modal-backdrop-color-background);
-    backface-visibility: hidden;
-    visibility: hidden;
-    opacity: 0;
-    will-change: visibility, z-index, opacity;
-}
-
-.d-modal--transparent {
-  --modal-backdrop-color-background: var(--d-bgc-transparent);
-
-  &[aria-hidden='false'] {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100%;
-  }
-}
-
-//  $$  MODAL DIALOG
-//  ----------------------------------------------------------------------------
-.d-modal__dialog {
-  position: relative;
-  z-index: var(--zi-hide);
-  display: flex;
-  flex-direction: column;
-  gap: var(--dt-space-500); //
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--dt-size-1020); // 628
-  max-height: 100%;
-  padding: var(--modal-dialog-padding); // 32
-  overflow-y: auto;
-  color: var(--modal-dialog-color-text);
-  font-size: var(--dt-font-size-200);
-  line-height: var(--dt-font-line-height-400);
-  background-color: var(--modal-dialog-color-background);
-  background-clip: padding-box;
-  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
-  border-radius: var(--dt-size-500);
-  box-shadow: var(--modal-dialog-shadow);
-  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75);
-  backface-visibility: hidden;
-  visibility: hidden;
-  opacity: 0;
-  will-change: visibility, z-index, opacity, transform;
-}
-
-//  $$   MAKE THEM APPEAR
-//  ----------------------------------------------------------------------------
-.d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog,
-.d-modal--transparent[aria-hidden='false'],
-.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
-  z-index: var(--zi-modal);
-  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-  visibility: visible;
-  opacity: 1;
-}
-
-
-//  ============================================================================
-//  $   MODAL AREAS
-//  ----------------------------------------------------------------------------
-.d-modal__footer {
-  --modal-footer-padding: var(--dt-space-550); // 24
-
-  display: flex;
-  flex-direction: row-reverse;
-  gap: var(--dt-space-400);
-  align-items: center;
-}
-
-
-//  ============================================================================
-//  $   TYPE STYLES
-//  ============================================================================
-//  $$  HEADER
-//  ----------------------------------------------------------------------------
-.d-modal__header {
-  --modal-header-padding: var(--dt-space-550); // 24
-
-  margin: 0 !important;
-  color: var(--modal-header-color-text);
-  font-weight: var(--dt-font-weight-medium);
-  font-size: var(--dt-font-size-400);
-  line-height: var(--dt-font-line-height-100);
-}
-
-//  $$  CONTENT
-//  ----------------------------------------------------------------------------
-.d-modal__content {
-  max-width: 75ch;
-}
-
-
-//  ============================================================================
-//  $   BUTTONS
-//  ----------------------------------------------------------------------------
-.d-modal__close {
-  position: absolute;
-  top: var(--dt-space-500); // 16
-  right: var(--dt-space-500); // 16
-  margin: 0 !important;
-}
-
-
-//  ============================================================================
-//  $   BANNERS
-//  ----------------------------------------------------------------------------
-.d-modal__banner {
-  --modal-banner-padding-y: var(--dt-space-500);
-  --modal-banner-padding-x: var(--dt-space-600);
-  --modal-banner-color-background: var(--dt-color-surface-warning);
-
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--dt-size-1020); // 628
-  padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
-  color: var(--dt-color-foreground-primary);
-  font-size: var(--dt-font-size-200);
-  line-height: var(--dt-font-line-height-300);
-  background-color: var(--modal-banner-color-background);
-  background-clip: padding-box;
-  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
-  border-bottom-width: 0;
-  border-radius: var(--dt-size-500) var(--dt-size-500) 0 0;
-  box-shadow: var(--modal-dialog-shadow);
-
-  &--warning {
-    --modal-banner-color-background: var(--dt-color-surface-warning);
-  }
-
-  &--info {
-    --modal-banner-color-background: var(--dt-color-surface-info);
-  }
-
-  &--critical {
-    --modal-banner-color-background: var(--dt-color-surface-critical);
-  }
-
-  &--success {
-    --modal-banner-color-background: var(--dt-color-surface-success);
-  }
-
-  &--general {
-    --modal-banner-color-background: var(--dt-color-surface-secondary);
-  }
-
-  &::before {
-    // 🤦 don't ask. or do, i'm not even sorry.
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: var(--zi-modal-element);
-    height: var(--modal-banner-padding-y);
-    background-color: var(--modal-banner-color-background);
-    content: '';
-  }
-
-  &:not(.d-d-none) + .d-modal__dialog {
-    border-top-width: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-
-//  ============================================================================
-//  $   MODIFYING STYLES
-//  ============================================================================
-//  $$  FULL WIDTH
-//  ----------------------------------------------------------------------------
-.d-modal--full {
-  --modal-dialog-padding: 0;
-
-  padding: 0;
-  overflow: hidden scroll;
-  transform: unset !important;
-
-  .d-modal__dialog {
-    display: flex;
-    flex-direction: column;
-    max-width: unset;
-    height: 100%;
-    border-radius: 0;
-    transform: unset !important;
-  }
-
-  .d-modal__header {
-    padding: var(--dt-space-600) var(--dt-space-600) 0; // 32
-  }
-
-  .d-modal__content {
-    padding-right: 0;
-    padding-left: var(--dt-space-600); // 32
-  }
-
-  .d-modal__footer {
-    margin-top: auto !important;
-    padding: 0 var(--dt-space-550) var(--dt-space-600) var(--dt-space-600); // 0 24 32 32
-  }
-
-  .d-modal__banner {
-    max-width: unset;
-    padding: var(--dt-space-450) var(--dt-space-600); // 12 32
-    border-radius: 0;
-  }
-}
-
-// $$   SCROLLABLE
-//  ----------------------------------------------------------------------------
-.d-modal__dialog--scrollable {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .d-modal__content {
-    overflow-y: auto;
-  }
-}
-
-//  $$  DANGER
-//  ----------------------------------------------------------------------------
-.d-modal--danger {
-  --modal-header-color-text: var(--dt-color-foreground-primary);
-}
-
-
-//  ============================================================================
-//  $   TRANSITIONS
-//  ----------------------------------------------------------------------------
-.d-modal--animate {
-  z-index: var(--zi-hide) !important;
-  backface-visibility: hidden !important;
-  visibility: hidden !important;
-  opacity: 0 !important;
-}
-
-.d-modal__dialog--animate {
-  .d-modal--animate();
-
-  transform: translate3d(0, 30%, 0) scale3d(0.75, 0.75, 0.75) !important;
-}
-
-.d-modal--animate-in,
- .d-modal__dialog--animate-in {
-  transition:
-    opacity 100ms var(--ttf-in-out) 10ms,
-    z-index 0s 0s,
-    visibility 0s 0s,
-    transform 100ms var(--ttf-in-out) 10ms;
-
-  @media (prefers-reduced-motion) {
-    transition: none !important;
-  }
-}
-
-.d-modal--animate-out {
-  transition:
-    opacity 100ms var(--ttf-in-out) 10ms,
-    z-index 0s 200ms,
-    visibility 0s 200ms,
-    transform 100ms var(--ttf-in-out) 10ms;
-
-  &.d-modal--full {
-    transition:
-      opacity 200ms var(--ttf-in-out) 0s,
-      z-index 0s 200ms,
-      visibility 0s 200ms;
-  }
-
-  @media (prefers-reduced-motion) {
-    transition: none !important;
-  }
-}
-
-.d-modal__dialog--animate-out {
-  transition:
-    opacity 200ms var(--ttf-in-out) 0s,
-    z-index 0s 200ms,
-    visibility 0s 200ms,
-    transform 100ms var(--ttf-in-out) 0s;
-
-  &.d-modal--full {
-    transition:
-      opacity 200ms var(--ttf-in-out) 0s,
-      z-index 0s 200ms,
-      visibility 0s 200ms;
-  }
-
-  @media (prefers-reduced-motion) {
-    transition: none !important;
-  }
-}

package/lib/build/less/components/notice.less

@@ -1,171 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: NOTICES
-//
-//  These are the styles for notices, which are used by alert users to
-//  information they might need. For further documentation of these styles,
-//  please visit https://dialpad.design/components/notices
-//
-//  ============================================================================
-//  $   BASE WRAPPER
-//  ----------------------------------------------------------------------------
-
-.d-notice,
-.d-banner,
-.d-toast {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --notice-color-background: var(--dt-color-surface-secondary);
-    --notice-color-text: var(--dt-color-foreground-primary);
-    --notice-color-icon: var(--notice-color-text);
-    --notice-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.06);
-    --notice-padding: var(--dt-space-500);
-    --notice-font-size: var(--dt-font-size-200);
-    --notice-line-height: var(--dt-font-line-height-300);
-    --notice-border-radius: var(--dt-size-400);
-    --notice-box-shadow: 0 0 0 var(--dt-size-100) var(--notice-color-shadow) inset;
-
-    //  Base Styles
-    //  ------------------------------------------------------------------------
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: var(--dt-size-1020);
-    padding: var(--notice-padding);
-    color: var(--notice-color-text);
-    font-size: var(--notice-font-size);
-    line-height: var(--notice-line-height);
-    background-color: var(--notice-color-background);
-    border-radius: var(--notice-border-radius);
-    box-shadow: var(--notice-box-shadow);
-}
-
-//  ============================================================================
-//  $   NOTICE AREAS
-//  ============================================================================
-//  $$  CONTENT
-//  ----------------------------------------------------------------------------
-.d-notice__content {
-    display: flex;
-    flex: 1 auto;
-    flex-direction: column;
-    margin-right: var(--dt-space-500);
-}
-
-//  $$  ACTIONS
-//  ----------------------------------------------------------------------------
-.d-notice__actions {
-    display: flex;
-    flex: 0 auto;
-    gap: var(--dt-space-400);
-    align-items: center;
-
-    button {
-        color: var(--notice-color-text);
-    }
-}
-
-//  $$  ICON
-//  ----------------------------------------------------------------------------
-.d-notice__icon {
-    display: flex;
-    flex: 0 auto;
-    margin-right: var(--dt-space-450);
-    color: var(--notice-color-icon);
-
-    .d-banner & {
-        margin-right: var(--dt-space-400);
-    }
-}
-
-//  ============================================================================
-//  $   COPY STYLES
-//  ============================================================================
-.d-notice__title {
-    font-weight: var(--dt-font-weight-bold);
-    font-size: inherit;
-}
-
-.d-notice__message {
-    .d-notice__title:not([hidden]) + & {
-        font-size: var(--dt-font-size-100);
-    }
-}
-
-//  ============================================================================
-//  $   STYLES
-//  ============================================================================
-//  $$  DEFAULT IMPORTANT
-//  ----------------------------------------------------------------------------
-.d-notice.d-notice--important,
-.d-banner.d-banner--important,
-.d-toast.d-toast--important {
-    --notice-color-background: var(--dt-color-surface-strong);
-    --notice-color-text: var(--dt-color-foreground-primary-inverted);
-    --notice-color-icon: var(--notice-color-text);
-    --notice-color-shadow: transparent;
-}
-
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.d-notice--error,
-.d-banner--error,
-.d-toast--error {
-    --notice-color-background: var(--dt-color-surface-critical);
-    --notice-color-icon: var(--dt-color-red-400);
-
-    &.d-notice--important,
-    &.d-banner--important,
-    &.d-toast--important {
-        --notice-color-background: var(--dt-color-surface-critical-strong);
-    }
-}
-
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.d-notice--info,
-.d-banner--info,
-.d-toast--info {
-    --notice-color-background: var(--dt-color-surface-info);
-    --notice-color-icon: var(--dt-color-blue-500);
-
-    &.d-notice--important,
-    &.d-banner--important,
-    &.d-toast--important {
-        --notice-color-background: var(--dt-color-surface-info-strong);
-        --notice-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-notice--success,
-.d-banner--success,
-.d-toast--success {
-    --notice-color-background: var(--dt-color-surface-success);
-    --notice-color-icon: var(--dt-color-green-400);
-
-    &.d-notice--important,
-    &.d-banner--important,
-    &.d-toast--important {
-        --notice-color-background: var(--dt-color-surface-success-strong);
-        --notice-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-notice--warning,
-.d-banner--warning,
-.d-toast--warning {
-    --notice-color-background: var(--dt-color-surface-warning);
-    --notice-color-icon: var(--dt-color-gold-400);
-
-    &.d-notice--important,
-    &.d-banner--important,
-    &.d-toast--important {
-        --notice-color-background: var(--dt-color-surface-warning-strong);
-        --notice-color-text: var(--dt-color-neutral-black);
-    }
-}