@dialpad/dialtone 9.0.3 → 9.1.0

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

@@ -1,41 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Pagination
-//
-//  These are the styles for Pagination component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • PREV & NEXT BUTTONS
-//  • SEPARATOR
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-pagination {
-  display: flex;
-  flex-direction: row;
-  grid-gap: var(--dt-space-300);
-  align-items: center;
-}
-
-//  ============================================================================
-//  $   PREV & NEXT BUTTONS
-//  ----------------------------------------------------------------------------
-.d-pagination__button {
-  padding-right: var(--dt-space-400);
-  padding-left: var(--dt-space-400);
-}
-
-//  ============================================================================
-//  $   SEPARATOR
-//  ----------------------------------------------------------------------------
-.d-pagination__separator {
-  align-self: flex-end;
-}
-
-.d-pagination__separator-icon {
-  width: var(--dt-size-550);
-  color: var(--dt-color-foreground-tertiary);
-  text-align: center;
-}

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

@@ -1,99 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: POPOVER
-//
-//  These are popover classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/popover
-//
-//  TABLE OF CONTENTS
-//  • POPOVER
-//  • POPOVER DIALOG
-//  • CSS CUSTOM PROPERTIES
-//  • POPOVER DIALOG
-//    - Base dialog style
-//    - Content
-//    - Header / Footer
-
-//  $  POPOVER
-//  ----------------------------------------------------------------------------
-.d-popover {
-  //  $  POPOVER DIALOG
-  //  ----------------------------------------------------------------------------
-
-  &__dialog {
-    //  $$  CSS CUSTOM PROPERTIES
-    //  ----------------------------------------------------------------------------
-    --popover-color-background: var(--dt-color-surface-secondary);
-    --popover-border-width: var(--dt-size-100);
-    --popover-border-radius: var(--dt-size-400);
-    --popover-color-border: var(--dt-color-border-subtle);
-    --popover-shadow: var(--dt-shadow-card);
-
-    &,
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-
-    display: grid;
-    grid-template-rows: min-content 1fr min-content;
-    overflow: auto;
-    background-color: var(--popover-color-background);
-    background-clip: padding-box;
-    border: var(--popover-border-width) solid var(--popover-color-border);
-    border-radius: var(--popover-border-radius);
-    box-shadow: var(--popover-shadow);
-
-    // to be set on the dialog when it is modal
-    &--modal {
-      z-index: var(--zi-modal-element);
-    }
-  }
-
-  //  $$  DIALOG CONTENT
-  //  ----------------------------------------------------------------------------
-  &__content {
-    grid-row: 2;
-    overflow: auto;
-  }
-
-  //  $$  DIALOG HEADER / FOOTER
-  //  ----------------------------------------------------------------------------
-
-  &__header,
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    min-height: var(--dt-size-650);
-    padding-top: var(--dt-space-350);
-    padding-bottom: var(--dt-space-350);
-    overflow: auto;
-    font-weight: var(--dt-font-weight-semi-bold);
-    font-size: var(--dt-font-size-200);
-
-    &__content {
-      width: 100%;
-      text-overflow: ellipsis;
-    }
-
-    &__close-button {
-      margin-right: var(--dt-space-350);
-      padding: var(--dt-space-350);
-      border-color: transparent;
-    }
-  }
-
-  &__header {
-    grid-row: 1;
-    border-bottom: var(--popover-border-width) solid var(--popover-color-border);
-  }
-
-  &__footer {
-    grid-row: 3;
-    border-top: var(--popover-border-width) solid var(--popover-color-border);
-  }
-}

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

@@ -1,60 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: PRESENCE
-//
-//  These are presence classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/presence
-
-.d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-color-background);
-  --presence-color-border-offline: var(--dt-color-black-600);
-  --presence-color-background-active: var(--dt-theme-presence-color-background-available);
-  --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
-  --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
-  --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
-  --presence-border-size: var(--dt-size-200);
-  --presence-size: var(--dt-size-400);
-
-  display: inline-block;
-  box-sizing: border-box;
-  border-color: var(--presence-color-border-base);
-  border-style: solid;
-  border-width: var(--presence-border-size);
-  border-radius: var(--dt-size-radius-circle);
-
-  .dt-leftbar-row--selected & {
-    --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
-  }
-
-  .dt-leftbar-row__primary:hover & {
-    --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
-  }
-
-  &__inner {
-    box-sizing: border-box;
-    width: var(--presence-size);
-    height: var(--presence-size);
-    border: none;
-    border-radius: 50%;
-
-    &--active {
-      background-color: var(--presence-color-background-active);
-    }
-
-    &--busy {
-      background-color: var(--presence-color-background-busy);
-    }
-
-    &--away {
-      background-color: var(--presence-color-background-away);
-    }
-
-    &--offline {
-      background-color: var(--presence-color-background-offline);
-      border-color: var(--presence-color-border-offline);
-      border-style: solid;
-      border-width: var(--dt-size-200);
-    }
-  }
-}

package/dist/css/lib/build/less/components/radio-checkbox.less

@@ -1,278 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: RADIOS & CHECKBOXES
-//
-//  These are input classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/inputs
-//
-//  TABLE OF CONTENTS
-//  • SHARED STYLES
-//  • WRAPPERS
-//  • INPUT & COPY BLOCKS
-//  • LABELS
-//  • CHECKBOXES
-//    - Modifications
-//  • RADIOS
-//    - Modifications
-//
-//  ============================================================================
-//  $   RADIOS & CHECKBOXES
-//  ----------------------------------------------------------------------------
-
-.d-checkbox,
-.d-radio {
-    //  Component specific CSS Vars
-    //  ------------------------------------------------------------------------
-    --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
-    --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
-    --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
-    --check-radio-color-background: var(--dt-inputs-color-background-default);
-    --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
-    --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
-    --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
-
-    //  [1] Check to see if we can use custom styles, if so reset the defaults
-    //  ------------------------------------------------------------------------
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        width: var(--dt-size-500); // 16
-        height: var(--dt-size-500); // 16
-
-        //  [2]  Now re-style the checkboxes and radios
-        //  --------------------------------------------------------------------
-        margin: 0;
-        font-size: inherit;
-        background-color: var(--check-radio-color-background);
-        border: var(--check-radio-border-width) solid var(--check-radio-color-border);
-        outline: 0;
-        box-shadow: none;
-        cursor: pointer;
-        -webkit-appearance: none;
-           -moz-appearance: none;
-                appearance: none;
-
-        &::-ms-check {
-            display: none;
-        }
-
-        &:focus,
-        &:checked:focus {
-          outline: 0;
-          box-shadow: var(--dt-shadow-focus);
-        }
-
-        &:checked {
-            --check-radio-color-border: var(--check-radio-color-border-checked);
-        }
-    }
-
-    flex: 0 auto;
-    align-self: flex-start;
-    transition-timing-function: var(--ttf-out-quint);
-    transition-duration: var(--td200);
-    transition-property: box-shadow;
-
-    //  --  DISABLED
-    &[disabled],
-    &--disabled {
-        --check-radio-color: var(--dt-color-foreground-disabled);
-        --check-radio-color-border: var(--check-radio-color-border-disabled);
-        --check-radio-color-background: var(--check-radio-color-background-disabled);
-
-        cursor: not-allowed;
-    }
-}
-
-
-//  ============================================================================
-//  $   RADIO / CHECKBOX WRAPPERS
-//  ----------------------------------------------------------------------------
-.d-checkbox-group,
-.d-radio-group {
-    display: inline-flex;
-    gap: var(--dt-space-400); // 8
-
-    //  --  Wrapper Disabled State
-    &.d-checkbox-group--disabled,
-    &.d-radio-group--disabled {
-        .d-checkbox__label,
-        .d-radio__label {
-            color: var(--dt-color-foreground-disabled);
-            cursor: not-allowed;
-        }
-    }
-}
-
-.d-input-group__fieldset {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &__label {
-        display: flex;
-        flex: 1 0%;
-        align-items: baseline;
-        justify-content: space-between;
-        box-sizing: border-box;
-        margin-bottom: var(--dt-space-300);
-        color: var(--dt-color-foreground-secondary);
-        font-weight: var(--dt-font-weight-semi-bold);
-        font-size: var(--dt-font-size-200);
-        font-family: inherit;
-        line-height: var(--dt-font-line-height-300);
-        word-break: break-word;
-        overflow-wrap: break-word;
-    }
-}
-
-
-//  ============================================================================
-//  $   INPUT BLOCKS
-//      This holds the radio or checkbox input
-//  ----------------------------------------------------------------------------
-.d-checkbox__input,
-.d-radio__input {
-    display: flex;
-    align-self: flex-start;
-    padding-top: var(--dt-space-300);
-}
-
-
-//  ============================================================================
-//  $   COPY BLOCKS
-//      This holds the label and description copy
-//  ----------------------------------------------------------------------------
-.d-checkbox__copy,
-.d-radio__copy {
-    display: inline-flex;
-    flex-direction: column;
-}
-
-.d-checkbox__label,
-.d-radio__label {
-    display: inline-flex;
-    flex: 1 auto;
-    flex-direction: column;
-    align-items: flex-start;
-    color: var(--dt-color-foreground-primary);
-    font-weight: var(--dt-font-weight-normal);
-    font-size: var(--dt-font-size-200);
-    line-height: var(--dt-font-line-height-400);
-    cursor: pointer;
-}
-
-.d-checkbox__description {
-    display: flex;
-    box-sizing: border-box;
-    color: var(--dt-color-foreground-tertiary);
-    font-size: var(--dt-font-size-100);
-    font-family: inherit;
-    line-height: var(--dt-font-line-height-400);
-    fill: currentColor;
-  }
-
-//  ============================================================================
-//  $   CHECKBOXES
-//  ----------------------------------------------------------------------------
-.d-checkbox {
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: contain;
-        border-radius: var(--dt-size-300);
-
-        &:focus-visible,
-        &:checked:focus-visible {
-            box-shadow: var(--dt-shadow-focus);
-        }
-
-        &:checked {
-            --check-radio-color-background: var(--check-radio-color-background-checked);
-
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
-
-            //  Disabled
-            &[disabled] {
-                --check-radio-color-background: var(--check-radio-color-background-disabled);
-
-                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
-            }
-        }
-
-        &--disabled:checked {
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
-        }
-
-        &--indeterminate,
-        &:indeterminate {
-            --check-radio-color-background: var(--check-radio-color-background-checked);
-            --check-radio-color-border: var(--check-radio-color-border-checked);
-
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
-
-            &[disabled] {
-                --check-radio-color-background: var(--check-radio-color-background-disabled);
-                --check-radio-color-border: var(--check-radio-color-border-disabled);
-
-                background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
-            }
-        }
-
-        &--indeterminate&--disabled,
-        &:indeterminate&--disabled {
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
-        }
-
-        //  Disabled
-        &[disabled],
-        &--disabled {
-            --check-radio-color: var(--dt-color-foreground-disabled);
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-        }
-    }
-}
-
-//  ============================================================================
-//  $   RADIOS
-//  ----------------------------------------------------------------------------
-.d-radio {
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: var(--dt-size-radius-circle);
-
-        // Disabled
-        &[disabled],
-        &--disabled {
-            --check-radio-color: var(--dt-color-foreground-disabled);
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-        }
-
-        &:focus-visible,
-        &:checked:focus-visible {
-          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
-        }
-
-        &:checked {
-            --check-radio-color-background: var(--check-radio-color-background-checked);
-
-            box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
-
-            // Disabled
-            &[disabled] {
-                --check-radio-color-background: var(--check-radio-color-background-disabled);
-            }
-        }
-
-        &--disabled:checked {
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-        }
-    }
-}

package/dist/css/lib/build/less/components/root-layout.less

@@ -1,125 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Root Layout
-//
-//  These are the styles for root layout for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/root-layout.html
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-root-layout {
-  position: relative;
-  display: grid;
-  grid-template-areas:
-    'header header'
-    'sidebar body'
-    'footer footer';
-  grid-template-rows: min-content 1fr min-content;
-  grid-template-columns: min-content 1fr;
-  min-height: 100vh;
-
-  &--inverted {
-    grid-template-areas:
-      'header header'
-      'body sidebar'
-      'footer footer';
-    grid-template-columns: 1fr min-content;
-  }
-
-  &--fixed {
-    height: 100vh;
-  }
-
-  &__header {
-    grid-area: header;
-
-    &--sticky {
-      position: sticky;
-      top: 0;
-      z-index: var(--zi-navigation);
-    }
-  }
-
-  &__sidebar {
-    grid-area: sidebar;
-    height: 100%;
-    overflow: hidden auto;
-    box-shadow: none;
-  }
-
-  &__content {
-    grid-area: body;
-    overflow-y: auto;
-    box-shadow: none;
-
-    &:focus-visible {
-      box-shadow: none;
-    }
-  }
-
-  &__footer {
-    grid-area: footer;
-  }
-}
-
-@media (max-width: 480px) {
-
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--sm {
-    height: auto;
-  }
-
-  .d-root-layout__responsive--sm {
-    grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 640px) {
-
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--md {
-    height: auto;
-  }
-
-  .d-root-layout__responsive--md {
-    grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 980px) {
-
-  // Having a fixed height in mobile mode doesn't really make any sense,
-  // so we'll set it back to auto if the media query triggered.
-  .d-root-layout--fixed.d-root-layout__responsive--lg {
-    height: auto;
-  }
-
-  .d-root-layout__responsive--lg {
-    grid-template-areas:
-    'header'
-    'sidebar'
-    'body'
-    'footer';
-    grid-template-rows: min-content auto 1fr min-content;
-    grid-template-columns: 1fr;
-  }
-}