@dialpad/dialtone-css 1.0.0

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

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

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

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