@dialpad/dialtone-css 1.0.0

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

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

@@ -0,0 +1,63 @@
+//
+//  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/lib/build/less/components/image-viewer.less

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

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

@@ -0,0 +1,53 @@
+//
+//  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/lib/build/less/components/keyboard-shortcut.less

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