@dialpad/dialtone 9.0.3 → 9.1.1

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

@@ -1,153 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: FORMS
-//
-//  These are form classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/forms
-//
-//  TABLE OF CONTENTS
-//  • FIELDSETS
-//  • LABELS
-//    - Sizes
-//  • DESCRIPTIONS
-//    - Sizes
-//  • VALIDATION MESSAGES
-//    - Validation States
-//
-//  ============================================================================
-//  $  FIELDSETS
-//  ----------------------------------------------------------------------------
-fieldset {
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-
-//  ============================================================================
-//  $  LABELS
-//  ----------------------------------------------------------------------------
-.d-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;
-
-  legend & { cursor: default; }
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-label--xs {
-  font-size: var(--dt-font-size-100);
-}
-
-.d-label--sm {
-  font-size: var(--dt-font-size-200);
-}
-
-.d-label--lg {
-  font-size: var(--dt-font-size-200);
-}
-
-.d-label--xl {
-  font-size: var(--dt-font-size-300);
-}
-
-//  ============================================================================
-//  $ DESCRIPTIONS
-//  ----------------------------------------------------------------------------
-.d-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;
-}
-
-.d-label + .d-description {
-  margin-top: var(--dt-space-300-negative);
-  margin-bottom: var(--dt-space-300);
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-description--lg {
-  font-size: var(--dt-font-size-200);
-}
-
-.d-description--xl {
-  font-size: var(--dt-font-size-200);
-}
-
-//  ============================================================================
-//  $   VALIDATION MESSAGES
-//  ----------------------------------------------------------------------------
-.d-validation-message {
-  --validation-color-text: var(--dt-color-foreground-tertiary);
-
-  display: flex;
-  gap: var(--dt-space-300);
-  align-items: flex-start;
-  margin-top: var(--dt-space-400);
-  color: var(--validation-color-text);
-  font-weight: var(--dt-font-weight-medium);
-  font-size: var(--dt-font-size-100);
-  font-family: inherit;
-  line-height: var(--dt-font-line-height-300);
-
-  // Icon Slot
-  &::before {
-    display: block;
-    width: var(--dt-size-500); // 16
-    min-width: var(--dt-size-500); // 16
-    height: var(--dt-size-500); // 16
-    background-color: var(--validation-color-text);
-    content: '';
-  }
-
-  &__container {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-//  $$   VALIDATION STATES
-//  ----------------------------------------------------------------------------
-
-.d-validation-message--warning {
-  --validation-color-text: var(--dt-color-foreground-warning);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
-  }
-}
-
-.d-validation-message--error {
-  --validation-color-text: var(--dt-color-foreground-critical);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
-}
-
-.d-validation-message--success {
-  --validation-color-text: var(--dt-color-foreground-success);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
-}

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

@@ -1,63 +0,0 @@
-//
-//  DIALTONE
-//  UTILITIES: ICONS
-//
-//  These are icon component classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/icon.html
-//
-//  TABLE OF CONTENTS
-//  • SIZE
-//
-//  ============================================================================
-//  $   SIZE
-//  ----------------------------------------------------------------------------
-.d-icon {
-  --icon-base-scale: var(--dt-size-400); // replace with global variable eventually
-  --icon-size-100: calc(var(--icon-base-scale) * 1.5);
-  --icon-size-200: calc(var(--icon-base-scale) * 1.75);
-  --icon-size-300: calc(var(--icon-base-scale) * 2.25);
-  --icon-size-400: calc(var(--icon-base-scale) * 2.5);
-  --icon-size-500: calc(var(--icon-base-scale) * 3);
-  --icon-size-600: calc(var(--icon-base-scale) * 4);
-  --icon-size-700: calc(var(--icon-base-scale) * 4.75);
-  --icon-size-800: calc(var(--icon-base-scale) * 6);
-  --icon-size: var(--icon-size-500);
-
-  flex: none;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  fill: currentColor;
-
-  &--size-800 {
-    --icon-size: var(--icon-size-800);
-  }
-
-  &--size-700 {
-    --icon-size: var(--icon-size-700);
-  }
-
-  &--size-600 {
-    --icon-size: var(--icon-size-600);
-  }
-
-  &--size-500 {
-    --icon-size: var(--icon-size-500);
-  }
-
-  &--size-400 {
-    --icon-size: var(--icon-size-400);
-  }
-
-  &--size-300 {
-    --icon-size: var(--icon-size-300);
-  }
-
-  &--size-200 {
-    --icon-size: var(--icon-size-200);
-  }
-
-  &--size-100 {
-    --icon-size: var(--icon-size-100);
-  }
-}

package/dist/css/lib/build/less/components/image-viewer.less

@@ -1,35 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Image Viewer
-//
-//  These are the styles for Image Viewer component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-image-viewer__preview-button {
-  padding: var(--dt-space-0);
-  cursor: -webkit-zoom-in;
-  cursor: zoom-in;
-}
-
-.d-image-viewer__full {
-  max-width: 80%;
-  max-height: 80%;
-  padding: var(--dt-space-0);
-  border-radius: var(--dt-size-radius-0);
-
-  &__image {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-.d-image-viewer__close-button {
-  --fco: 100%;
-
-  color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--fco));
-}

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

@@ -1,321 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: INPUTS
-//
-//  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
-//  • VARIABLES
-//  • INPUTS & TEXTAREAS
-//    - Base Style
-//    - Wrapper
-//    - Validation States
-//    - Sizes
-//  • INPUT ICONS
-//
-
-//  $  INPUTS
-//  ----------------------------------------------------------------------------
-.d-input,
-.d-input--md,
-.d-textarea,
-.d-textarea--md,
-.d-input__wrapper--md,
-.d-input__wrapper {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --input-color-border: var(--dt-inputs-color-border-default);
-    --input-color-background: var(--dt-inputs-color-background-default);
-    --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
-    --input-color-text: var(--dt-inputs-color-foreground-default);
-    --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
-    --input-border-radius: var(--dt-size-400);
-    --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
-    --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-    --input-font-size: var(--dt-font-size-200);
-    --input-line-height: var(--dt-font-line-height-200);
-
-    position: relative;
-    display: inline-flex;
-    flex: 1 0%;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    padding: var(--input-padding-y) var(--input-padding-x);
-    color: var(--input-color-text);
-    font-weight: inherit;
-    font-size: var(--input-font-size);
-    font-family: inherit;
-    line-height: var(--input-line-height);
-    background-color: var(--input-color-background);
-    border: var(--input-border-width) solid var(--input-color-border);
-    border-radius: var(--input-border-radius);
-    outline: none;
-    box-shadow: none;
-    transition-timing-function: var(--ttf-in-out);
-    transition-duration: var(--td100);
-    transition-property: box-shadow, background-color;
-    appearance: none;
-    caret-color: var(--input-color-text);
-
-    //  --  Placeholder copy
-    &::placeholder {
-        color: var(--dt-inputs-color-foreground-placeholder);
-    }
-    //  --  Remove input EDGE additions
-    &::-ms-clear {
-        display: none;
-    }
-    //  --  FOCUS STATE
-    &:focus,
-    &:focus-within {
-        --input-color-background: var(--dt-inputs-color-background-focus);
-        --input-color-border: var(--dt-inputs-color-border-focus) !important;
-
-        box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
-    }
-    //  --  DISABLED / READ-ONLY
-    &[disabled],
-    &[read-only] {
-        --input-color-border: var(--dt-inputs-color-border-disabled) !important;
-        --input-color-background: var(--dt-inputs-color-background-disabled);
-        --input-color-text: var(--dt-inputs-color-foreground-disabled);
-
-        &:focus,
-        &:focus-within {
-            box-shadow: none !important;
-        }
-
-        //  --  Placeholder copy
-        &::placeholder {
-            color: var(--dt-inputs-color-foreground-placeholder);
-        }
-    }
-
-    //  --  DISABLED
-    &[disabled] {
-        cursor: not-allowed;
-    }
-
-    //  --  BROWSER-SPECIFIC
-    &::-moz-focus-inner {
-        outline: none !important;
-    }
-
-    &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 var(--dt-color-black-900);
-    }
-
-    &::-ms-expand {
-        display: none;
-    }
-}
-
-.d-input__label-text {
-    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;
-}
-
-.d-input__description {
-    display: flex;
-    flex-direction: column;
-    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;
-}
-
-.d-input__length-description {
-    margin-bottom: var(--dt-space-200);
-}
-
-//  $$  INPUT WRAPPER
-//  ----------------------------------------------------------------------------
-.d-input__wrapper {
-    padding: 0;
-
-    .d-input-icon.d-input-icon--right {
-        margin-right: var(--dt-space-400);
-    }
-
-    .d-input-icon.d-input-icon--left {
-        margin-left: var(--dt-space-400);
-    }
-
-    .d-textarea + .d-input-icon.d-input-icon--right {
-      position: absolute;
-      right: var(--dt-space-450);
-    }
-
-    .d-input,
-    .d-textarea {
-        flex: 1;
-        background-color: transparent;
-        border: none;
-
-        &:focus {
-            border: none;
-            outline: 0;
-            box-shadow: none !important;
-        }
-
-        &.d-input-icon--right {
-            padding-right: var(--dt-space-350);
-        }
-
-        &.d-input-icon--left {
-            padding-left: var(--dt-space-350);
-        }
-    }
-
-    .d-textarea {
-      &.d-input-icon--right {
-        padding-right: var(--dt-space-625);
-      }
-    }
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-input.d-input--xs {
-    #d-internal__input-and-select-xs();
-}
-
-.d-input.d-input--sm {
-    #d-internal__input-and-select-sm();
-}
-
-.d-input.d-input--lg {
-    #d-internal__input-and-select-lg();
-}
-
-.d-input.d-input--xl {
-    #d-internal__input-and-select-xl();
-}
-
-
-//  ============================================================================
-//  $  TEXTAREAS
-//  ----------------------------------------------------------------------------
-.d-textarea {
-    min-height: calc(var(--dt-size-300) * 20); // 80
-    vertical-align: top;
-    border-bottom-right-radius: var(--dt-size-300);
-    resize: vertical;
-    scroll-padding-block: var(--input-padding-y);
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-textarea--xs {
-    #d-internal__input-and-select-xs();
-
-    min-height: calc(var(--dt-size-300) * 10); // 40
-}
-
-.d-textarea--sm {
-    #d-internal__input-and-select-sm();
-
-    min-height: var(--dt-size-650); // 48
-}
-
-.d-textarea--lg {
-    #d-internal__input-and-select-lg();
-
-    min-height: calc(var(--dt-size-300) * 23); // 92
-}
-
-.d-textarea--xl {
-    #d-internal__input-and-select-xl();
-
-    min-height: calc(var(--dt-size-300) * 25); // 100
-}
-
-//  $$  VALIDATION STATES
-//  ----------------------------------------------------------------------------
-.d-input--warning,
-.d-textarea--warning {
-    --input-color-border: var(--dt-inputs-color-border-warning) !important;
-}
-
-.d-input--error,
-.d-textarea--error {
-    --input-color-border: var(--dt-inputs-color-border-critical) !important;
-}
-
-.d-input--success,
-.d-textarea--success {
-    --input-color-border: var(--dt-inputs-color-border-success) !important;
-}
-
-//  ============================================================================
-//  $  INPUT ICONS
-//  ----------------------------------------------------------------------------
-.d-input-icon {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --input-icon-size: var(--dt-size-500);
-    --input-icon-container-height: var(--dt-size-600);
-
-    z-index: var(--zi-base1);
-    display: inline-flex;
-    align-items: center;
-    height: var(--input-icon-container-height);
-    margin: 0;
-}
-
-
-
-//  $$ SIZES
-//  ----------------------------------------------------------------------------
-.d-input-icon.d-input--xs {
-    --input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
-}
-
-.d-input-icon--xs {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-100);
-}
-
-.d-input-icon.d-input--sm {
-    --input-icon-container-height: var(--dt-size-600);
-}
-
-.d-input-icon--sm {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-200);
-}
-
-.d-input-icon.d-input--lg {
-    --input-icon-container-height: calc(var(--dt-size-300) * 10);
-}
-
-.d-input-icon--lg {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-400);
-}
-
-.d-input-icon.d-input--xl {
-    --input-icon-container-height: calc(var(--dt-size-300) * 14);
-}
-
-.d-input-icon--xl {
-    // Backwards-compatible to DT6 icons
-    --input-icon-size: var(--dt-icon-size-500);
-}

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

@@ -1,53 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: ITEM LAYOUT
-//
-// Custom layout to enable developer to use list-item like stack.
-// It is used as base for `dt-list-item` component
-// visit https://dialpad.design/components/item_layout
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.dt-item-layout {
-  display: flex;
-  align-items: center;
-  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
-  padding: var(--dt-space-300) var(--dt-space-400);
-  font-size: var(--dt-font-size-200);
-  line-height: var(--dt-font-line-height-300);
-
-  &--content {
-    flex-grow: 1;
-    min-width: var(--dt-size-0);
-  }
-
-  &--subtitle {
-    color: var(--dt-color-foreground-tertiary);
-    font-size: var(--dt-font-size-100);
-  }
-
-  &--right,
-  &--left {
-    display: flex;
-    align-items: center;
-    min-width: var(--dt-size-600);
-    min-height: inherit;
-  }
-
-  &--right {
-    padding-left: var(--dt-space-400);
-  }
-
-  &--left {
-    justify-content: flex-end;
-    padding-right: var(--dt-space-400);
-  }
-
-  &--bottom {
-    margin-top: var(--dt-space-200);
-  }
-}

package/dist/css/lib/build/less/components/keyboard-shortcut.less

@@ -1,39 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Keyboard Shortcut
-//
-//  These are the styles for Keyboard Shortcut component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-keyboard-shortcut {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding-right: var(--dt-space-300);
-  padding-left: var(--dt-space-300);
-  font-size: var(--dt-font-size-100);
-  font-family: var(--dt-font-family-body);
-  border: var(--dt-size-100) solid;
-  border-color: var(--dt-color-border-default);
-  border-radius: var(--dt-size-radius-300);
-
-  &--inverted {
-    border-color: var(--dt-color-border-moderate-inverted);
-  }
-
-  &__icon,
-  &__item {
-    margin-right: var(--dt-space-200);
-    color: var(--dt-color-foreground-tertiary);
-
-    &--inverted {
-      color: var(--dt-color-foreground-secondary-inverted);
-    }
-  }
-}