@dialpad/dialtone 9.0.2 → 9.1.0

package/dist/css/lib/build/less/components/tabs.less

@@ -1,219 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: TABS
-//
-//  These are tab classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/tabs
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • ALTERNATE STYLES
-//
-//  ============================================================================
-//  $   WRAPPERS
-//  ----------------------------------------------------------------------------
-.d-tablist {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dt-space-300);
-    color: var(--dt-color-foreground-muted-default);
-    font-size: var(--dt-font-size-200);
-
-    &:focus {
-        outline: 0;
-    }
-
-    // Add a bottom border unless no border is requested
-    &:not(.d-tablist--no-border)::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: var(--zi-base1);
-        height: var(--dt-size-100);
-        background-color: var(--dt-color-border-default);
-        content: '';
-    }
-
-    //  ============================================================================
-    //  $   SIZES
-    //  ----------------------------------------------------------------------------
-    &--sm {
-        font-size: var(--dt-font-size-100);
-
-        .d-tab {
-            --tab-padding-x: var(--dt-space-400);
-            --tab-padding-y: var(--dt-space-400);
-            --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
-            --tab-border-radius-top: var(--dt-size-radius-300);
-
-            .d-tablist--no-border &:not(.d-tab--selected) {
-                border-radius: var(--tab-border-radius-top);
-            }
-        }
-    }
-}
-
-
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-tab {
-    //  --  COMPONENT CSS VARS
-    //  ------------------------------------------------------------------------
-    --tab-color-background: var(--dt-action-color-background-base-default);
-    --tab-color-text: var(--dt-action-color-foreground-muted-default);
-    --tab-line-height: var(--dt-font-line-height-200);
-    --tab-font-weight: var(--dt-font-weight-medium);
-    --tab-border-radius-top: var(--dt-size-radius-400);
-    --tab-padding-x: var(--dt-space-450);
-    --tab-padding-y: var(--dt-space-400);
-    --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
-
-    position: relative;
-    display: inline-flex;
-    gap: var(--dt-space-400);
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: var(--tab-padding-y) var(--tab-padding-x);
-    padding-bottom: var(--tab-padding-bottom);
-    color: var(--tab-color-text);
-    font: inherit;
-    font-weight: var(--tab-font-weight);
-    line-height: var(--tab-line-height);
-    background-color: var(--tab-color-background);
-    border: 0;
-    border-radius: var(--tab-border-radius-top) var(--tab-border-radius-top) 0 0;
-    cursor: pointer;
-    transition-timing-function: var(--ttf-out-quint);
-    transition-duration: var(--td200);
-    transition-property: background-color, border, color, box-shadow;
-    fill: currentColor;
-
-    .d-tablist--no-border &:not(.d-tab--selected) {
-        border-radius: var(--tab-border-radius-top);
-    }
-
-    &:first-of-type {
-        margin-left: 0;
-    }
-
-    &:last-of-type {
-        margin-right: 0;
-    }
-
-    &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: var(--dt-size-200);
-        background-color: var(--tab-color-background);
-        content: '';
-
-        .d-tablist--no-border & {
-            background-color: transparent;
-        }
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow: var(--dt-shadow-focus-inset);
-    }
-
-    &:disabled {
-        --tab-color-text: var(--dt-action-color-foreground-disabled-default);
-
-        cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover {
-        --tab-color-background: var(--dt-action-color-background-muted-hover);
-        --tab-color-text: var(--dt-action-color-foreground-muted-hover);
-    }
-
-    &:not(:disabled):active {
-        --tab-color-background: var(--dt-action-color-background-muted-active);
-        --tab-color-text: var(--dt-action-color-foreground-muted-active);
-    }
-
-    //  Turn off animations if someone doesn't want them.
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
-
-//  ============================================================================
-//  $   SELECTED STYLE
-//  ----------------------------------------------------------------------------
-.d-tab--selected {
-    --tab-color-text: var(--dt-action-color-foreground-base-default);
-
-    z-index: var(--zi-selected);
-
-    &:not(:disabled):hover {
-        --tab-color-background: var(--dt-action-color-background-base-hover);
-        --tab-color-text: var(--dt-action-color-foreground-base-hover);
-    }
-
-    &:not(:disabled):active {
-        --tab-color-background: var(--dt-action-color-background-base-active);
-        --tab-color-text: var(--dt-action-color-foreground-base-active);
-    }
-
-    &::after,
-    &:hover::after {
-        --tab-color-background: var(--dt-action-color-foreground-base-default);
-
-        .d-tablist--no-border & {
-            background-color: var(--tab-color-background);
-        }
-    }
-}
-
-
-//  ============================================================================
-//  $   INVERTED STYLE
-//  ----------------------------------------------------------------------------
-.d-tablist--inverted {
-    --tab-color-text: var(--dt-action-color-foreground-inverted-default);
-
-    &::after {
-        background-color: var(--dt-color-border-moderate-inverted);
-    }
-
-    &:not(.d-tablist--no-border)::after {
-        background-color: var(--dt-color-foreground-primary-inverted);
-    }
-
-    .d-tab {
-        --tab-color-text: var(--dt-action-color-foreground-inverted-default);
-
-        &:not(:disabled):hover {
-            --tab-color-text: var(--dt-action-color-foreground-inverted-hover);
-            --tab-color-background: var(--dt-action-color-background-inverted-hover);
-        }
-
-        &:not(:disabled):active {
-            --tab-color-text: var(--dt-action-color-foreground-inverted-active);
-            --tab-color-background: var(--dt-action-color-background-inverted-active);
-        }
-
-        &:disabled {
-            --tab-color-text: var(--dt-action-color-foreground-disabled-default);
-
-            cursor: not-allowed;
-        }
-    }
-
-    .d-tab--selected {
-        --tab-color-text: var(--dt-action-color-foreground-inverted-default);
-
-        &::after {
-            --tab-color-background: currentColor;
-        }
-    }
-}

package/dist/css/lib/build/less/components/toast.less

@@ -1,120 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: TOAST
-//
-//  These are the styles for toast notices, which are used by alert users to
-//  information they might need. For further documentation of these styles,
-//  please visit https://dialpad.design/components/toasts
-
-//  ============================================================================
-//  @   TOAST CONTAINER
-//  ----------------------------------------------------------------------------
-.d-toast-wrapper {
-  position: absolute;
-  top: var(--dt-space-600); // 32
-  left: 50%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--dt-space-500);
-  transform: translateX(-50%);
-}
-
-//  ============================================================================
-//  @   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-toast {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
-    --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
-
-    z-index: var(--zi-notification);
-    display: block;
-    max-width: var(--dt-size-975);
-    word-break: normal;
-    box-shadow: var(--toast-box-shadow);
-    pointer-events: all;
-
-    //  If there's a link in a toast, break the url so it wraps
-    > a {
-        word-break: break-all;
-    }
-
-    // If you want to hide and reveal the toast
-    &[aria-hidden='true'] {
-        visibility: hidden;
-        opacity: 0;
-    }
-
-    &[aria-hidden='false'] {
-        visibility: visible;
-        opacity: 1;
-    }
-}
-
-//  ============================================================================
-//  $   CONTENT CONTAINER
-//  ----------------------------------------------------------------------------
-.d-toast__dialog {
-    position: relative;
-    display: flex;
-    align-items: center;
-
-
-    .d-notice__actions button:first-child {
-        margin-left: var(--dt-space-600); // 32
-    }
-}
-
-//  ============================================================================
-//  $   UC Toast Shims
-//  ============================================================================
-//  $$  CHAT
-//  ----------------------------------------------------------------------------
-.d-toast--chat {
-  .d-notice__icon,
-  .d-toast__meta {
-    color: var(--dt-color-black-500);
-  }
-
-  .d-toast__meta {
-    font-size: var(--dt-font-size-100);
-  }
-
-  &.d-toast--important {
-    .d-notice__icon,
-    .d-toast__meta {
-      color: var(--dt-color-foreground-secondary-inverted);
-    }
-  }
-}
-
-//  $$  ORGANIZER
-//  ----------------------------------------------------------------------------
-.d-toast--organizer {
-  //
-}
-
-//  $$  VIEWING
-//  ----------------------------------------------------------------------------
-// TODO: resolve
-.d-toast--viewing {
- //
-}
-
-.d-toast--organizer,
-.d-toast--viewing {
-  --toast-border-radius: var(--dt-size-radius-200);
-
-  border-top: var(--dt-size-300) solid var(--dt-color-magenta-300);
-
-  .d-notice__icon {
-    color: var(--dt-color-magenta-300);
-  }
-}
-
-.d-toast--chat,
-.d-toast--organizer,
-.d-toast--viewing {
-  --toast-color-background: var(--dt-color-surface-secondary);
-}

package/dist/css/lib/build/less/components/toggle.less

@@ -1,173 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: TOGGLE
-//
-//  These are toggle classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/toggle
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • TOGGLE VARIANTS
-//  • CHECKED TOGGLE
-//  • INDETERMINATE TOGGLE
-//  • FOCUSED TOGGLE
-//  • DISABLED TOGGLE
-//  • TOGGLE WRAPPER
-//
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-toggle {
-  //  Component specific CSS Vars
-  //  ------------------------------------------------------------------------
-  --toggle-transition-timing-function: var(--ttf-out-quint);
-  --toggle-transition-speed: var(--td300);
-  --toggle-color-background: var(--dt-color-black-400);
-  --toggle-size-height: var(--dt-size-550); // 24
-  --toggle-size-width: var(--dt-size-650); // 48
-  --toggle-size-icon: var(--dt-size-500); // 16
-
-  //  $$  BASE STYLE
-  //  ----------------------------------------------------------------------------
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  width: var(--toggle-size-width);
-  min-width: var(--toggle-size-width);
-  height: var(--toggle-size-height);
-  padding: 0;
-  line-height: var(--lh4);
-  vertical-align: middle;
-  background-color: var(--toggle-color-background);
-  border: var(--dt-size-100) solid var(--toggle-color-background);
-  border-radius: var(--toggle-size-width);
-  cursor: pointer;
-  transition-timing-function: var(--ttf-out-quint);
-  transition-duration: var(--td200);
-  transition-property: background-color, border, color, box-shadow;
-
-  &__inner {
-    position: absolute;
-    top: calc(var(--dt-space-300) - var(--dt-space-100)); // 3
-    left: var(--dt-space-550); // 24
-    width: var(--toggle-size-icon);
-    height: var(--toggle-size-icon);
-
-    .d-toggle--small & {
-      top: var(--dt-space-100); // 1
-      left: calc(var(--dt-space-500) + var(--dt-space-100)); // 17
-    }
-
-    .d-toggle--indeterminate & {
-      display: none;
-    }
-
-    color: var(--dt-color-neutral-white);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM4MTI4IDUuMzgxMjhDNS43MjI5OSA1LjAzOTU3IDYuMjc3MDEgNS4wMzk1NyA2LjYxODcyIDUuMzgxMjhMMTIgMTAuNzYyNkwxNy4zODEzIDUuMzgxMjhDMTcuNzIzIDUuMDM5NTcgMTguMjc3IDUuMDM5NTcgMTguNjE4NyA1LjM4MTI4QzE4Ljk2MDQgNS43MjI5OSAxOC45NjA0IDYuMjc3MDEgMTguNjE4NyA2LjYxODcyTDEzLjIzNzQgMTJMMTguNjE4NyAxNy4zODEzQzE4Ljk2MDQgMTcuNzIzIDE4Ljk2MDQgMTguMjc3IDE4LjYxODcgMTguNjE4N0MxOC4yNzcgMTguOTYwNCAxNy43MjMgMTguOTYwNCAxNy4zODEzIDE4LjYxODdMMTIgMTMuMjM3NEw2LjYxODcyIDE4LjYxODdDNi4yNzcwMSAxOC45NjA0IDUuNzIyOTkgMTguOTYwNCA1LjM4MTI4IDE4LjYxODdDNS4wMzk1NyAxOC4yNzcgNS4wMzk1NyAxNy43MjMgNS4zODEyOCAxNy4zODEzTDEwLjc2MjYgMTJMNS4zODEyOCA2LjYxODcyQzUuMDM5NTcgNi4yNzcwMSA1LjAzOTU3IDUuNzIyOTkgNS4zODEyOCA1LjM4MTI4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-
-  &::after {
-    position: absolute;
-    top: var(--dt-space-100); // 1
-    left: var(--dt-space-100); // 1
-    width: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    height: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    background-color: var(--dt-color-neutral-white);
-    border-radius: var(--dt-size-radius-circle);
-    cursor: pointer;
-    transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
-    content: ' ';
-  }
-
-  //  $$  TOGGLE VARIANTS
-  //  ----------------------------------------------------------------------------
-  &--small {
-    --toggle-size-height: calc(var(--dt-size-500) + var(--dt-size-200)); // 18
-    --toggle-size-width: calc(var(--dt-size-600) + var(--dt-size-300)); // 36
-    --toggle-size-icon: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-
-    &::before {
-      position: absolute;
-      inset: var(--dt-space-300-negative) 0 var(--dt-space-300-negative) 0; // -4 // -4
-      content: '';
-    }
-  }
-
-  &--small::after {
-    width: var(--toggle-size-icon);
-    height: var(--toggle-size-icon);
-  }
-
-  //  $$  CHECKED TOGGLE
-  //  ----------------------------------------------------------------------------
-  &--checked {
-    --toggle-color-background: var(--dt-color-brand-purple);
-
-    .d-toggle__inner {
-      left: var(--dt-space-350); // 6
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC42MTg3IDUuMzgxMjhDMjAuOTYwNCA1LjcyMjk5IDIwLjk2MDQgNi4yNzcwMSAyMC42MTg3IDYuNjE4NzJMOS42MTg3MiAxNy42MTg3QzkuMjc3MDEgMTcuOTYwNCA4LjcyMjk5IDE3Ljk2MDQgOC4zODEyOCAxNy42MTg3TDMuMzgxMjggMTIuNjE4N0MzLjAzOTU3IDEyLjI3NyAzLjAzOTU3IDExLjcyMyAzLjM4MTI4IDExLjM4MTNDMy43MjI5OSAxMS4wMzk2IDQuMjc3MDEgMTEuMDM5NiA0LjYxODcyIDExLjM4MTNMOSAxNS43NjI2TDE5LjM4MTMgNS4zODEyOEMxOS43MjMgNS4wMzk1NyAyMC4yNzcgNS4wMzk1NyAyMC42MTg3IDUuMzgxMjhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-    }
-
-    &.d-toggle--small .d-toggle__inner {
-      left: calc(var(--dt-space-100) + var(--dt-space-200)); // 3
-    }
-
-    &::after {
-      left: calc(var(--dt-space-550) + var(--dt-space-100)); // 25
-    }
-
-    &.d-toggle--small::after {
-      right: var(--dt-space-100); // 1
-      left: calc(calc(var(--dt-space-300) * 5) - var(--dt-space-100)); // 19
-    }
-  }
-
-  //  $$  INDETERMINATE TOGGLE
-  //  ----------------------------------------------------------------------------
-  &--indeterminate {
-    &__inner {
-      display: none;
-    }
-
-    &::after {
-      left: 50%;
-      transform: translate(-50%, 0);
-    }
-  }
-
-  //  $$  FOCUSED TOGGLE
-  //  ----------------------------------------------------------------------------
-  &:focus-visible {
-    outline: none;
-    box-shadow: var(--dt-shadow-focus);
-  }
-
-  //  $$  DISABLED TOGGLE
-  //  ----------------------------------------------------------------------------
-  &--disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-
-    &::after {
-      cursor: not-allowed;
-      transition-property: none;
-    }
-  }
-}
-
-.d-toggle-group {
-  gap: var(--dt-space-400); // 8
-}
-
-//  ============================================================================
-//  $   TOGGLE WRAPPER
-//  ----------------------------------------------------------------------------
-.d-toggle-wrapper {
-  display: flex;
-  align-items: center;
-}