@dialpad/dialtone-css 1.0.0

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

@@ -0,0 +1,41 @@
+//
+//  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/lib/build/less/components/popover.less

@@ -0,0 +1,99 @@
+//
+//  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/lib/build/less/components/presence.less

@@ -0,0 +1,60 @@
+//
+//  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/lib/build/less/components/radio-checkbox.less

@@ -0,0 +1,278 @@
+//
+//  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/lib/build/less/components/root-layout.less

@@ -0,0 +1,125 @@
+//
+//  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;
+  }
+}