@dialpad/dialtone-css 1.0.0

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

@@ -0,0 +1,130 @@
+//
+//  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

@@ -0,0 +1,48 @@
+//
+//  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

@@ -0,0 +1,17 @@
+//
+//  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

@@ -0,0 +1,340 @@
+//
+//  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

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