@dialpad/dialtone 9.0.2 → 9.1.0

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

@@ -1,152 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: SELECT MENUS
-//
-//  These are select menu classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/select
-//
-//  TABLE OF CONTENTS
-//  • SELECT MENUS
-//    - Sizes
-//  • SELECT MENU INPUTS
-//    - Validation States
-//
-
-//  ============================================================================
-//  $  SELECT MENU (NATIVE)
-//  ----------------------------------------------------------------------------
-.d-select {
-  //  Component CSS Vars
-  //  --------------------------------------------------------------------------
-  --select-color-border: var(--dt-inputs-color-border-default);
-  --select-notch-position-right: var(--dt-space-400);
-
-  position: relative;
-  width: stretch;
-
-  //  --  Arrows
-  &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 3.5);
-
-    position: absolute;
-    top: 50%;
-    right: var(--select-notch-position-right);
-    z-index: var(--zi-selected);
-    width: var(--select-arrow-size);
-    height: var(--select-arrow-size);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE0NiA3LjE0NmEuNS41IDAgMCAxIC43MDggMEw2IDkuMjkzbDIuMTQ2LTIuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTIuNSAyLjVhLjUuNSAwIDAgMS0uNzA4IDBsLTIuNS0yLjVhLjUuNSAwIDAgMSAwLS43MDhabTIuNS01LjVhLjUuNSAwIDAgMSAuNzA4IDBsMi41IDIuNWEuNS41IDAgMSAxLS43MDguNzA4TDYgMi43MDcgMy44NTQgNC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhsMi41LTIuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K');
-    background-repeat: no-repeat;
-    background-size: 100%;
-    transform: translateY(-50%);
-    content: '';
-    pointer-events: none;
-  }
-}
-
-//  $  SELECT MENU INPUT
-//  ----------------------------------------------------------------------------
-.d-select__input {
-  --select-color-border: var(--input-color-border);
-  --select-notch-padding-right: var(--dt-space-550);
-
-  // Use shared style properties of d-input (<input>, <textarea>)
-  .d-input();
-
-  // select options can be styled on windows
-  & option {
-    color: var(--dt-color-foreground-secondary);
-    background-color: var(--dt-color-surface-secondary);
-  }
-
-  //  --  FOCUS STATE
-  &:focus {
-      --input-color-background: var(--dt-inputs-color-background-focus);
-  }
-
-  // Adjust space on right beneath arrows
-  padding-right: var(--select-notch-padding-right);
-
-  &[disabled],
-  &[read-only] {
-    color: var(--dt-inputs-color-foreground-disabled);
-    background: var(--dt-inputs-color-background-disabled);
-    border-color: transparent;
-    border-style: solid;
-    border-width: var(--input-border-width);
-  }
-
-  &::-moz-focus-inner {
-    outline: none !important;
-  }
-
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 var(--dt-color-black-900);
-  }
-
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-//  $$  SIZES
-//  ----------------------------------------------------------------------------
-.d-select--xs {
-  .d-select__input {
-    #d-internal__input-and-select-xs();
-  }
-}
-
-.d-select--sm {
-  .d-select__input {
-    #d-internal__input-and-select-sm();
-  }
-}
-
-.d-select--lg {
-  .d-select__input {
-    #d-internal__input-and-select-lg();
-
-    --select-notch-padding-right: calc(var(--dt-space-300) * 9);
-  }
-
-  &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
-    --select-notch-position-right: var(--dt-space-450);
-  }
-}
-
-.d-select--xl {
-  .d-select__input {
-    #d-internal__input-and-select-xl();
-
-    --select-notch-padding-right: calc(var(--dt-space-300) * 9);
-  }
-
-  &::after {
-    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
-    --select-notch-position-right: var(--dt-space-450);
-  }
-}
-
-//  $$  VALIDATION STATES
-//  ------------------------------------------------------------------------
-.d-select__input--success {
-  --input-color-border: var(--dt-inputs-color-border-success);
-}
-
-.d-select__input--error {
-  --input-color-border: var(--dt-inputs-color-border-critical);
-}
-
-.d-select__input--warning {
-  --input-color-border: var(--dt-inputs-color-border-warning);
-}
-
-.d-select--disabled {
-  &::before,
-  &::after {
-    opacity: 0.33;
-  }
-}

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

@@ -1,101 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: SKELETON
-//
-//  These are the styles for skeleton component.
-//  The --placeholder-from-color and --placeholder-to-color custom properties can be set on the parent class of the
-//  placeholder to control the animation colors.
-//  For further documentation of these styles, please visit https://dialpad.design/components/skeleton
-//
-//
-//  TABLE OF CONTENTS
-//  • SKELETON CONTAINER
-//  • SKELETON LIST ITEM
-//  • SKELETON PARAGRAPH
-//  • SKELETON TEXT
-
-//  ============================================================================
-//  @   SKELETON CONTAINER
-//  ----------------------------------------------------------------------------
-.skeleton-placeholder {
-  --placeholder-from-color: hsla(var(--dt-color-black-900-hsl) / 0.2);
-  --placeholder-to-color: hsla(var(--dt-color-black-900-hsl) / 0.1);
-
-  display: flex;
-  width: 100%;
-  background: var(--placeholder-from-color);
-  animation-duration: 1000ms;
-  fill: var(--placeholder-from-color);
-  stroke: none;
-
-  &--animate {
-    animation-name: skeleton-placeholder-throb;
-    animation-iteration-count: infinite;
-  }
-}
-
-// the animation is used by the skeleton component
-@keyframes skeleton-placeholder-throb {
-  20% {
-    background: var(--placeholder-from-color);
-    fill: var(--placeholder-from-color);
-  }
-
-  50% {
-    background: var(--placeholder-to-color);
-    fill: var(--placeholder-to-color);
-  }
-
-  80% {
-    background: var(--placeholder-from-color);
-    fill: var(--placeholder-from-color);
-  }
-}
-
-//  ============================================================================
-//  @   SKELETON LIST ITEM
-//  ----------------------------------------------------------------------------
-.d-skeleton-list-item {
-  display: flex;
-
-  &--single {
-    align-items: center;
-  }
-
-  &__shape {
-    margin-right: var(--dt-space-400);
-  }
-
-  &__paragraph-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-}
-
-//  ============================================================================
-//  @   SKELETON PARAGRAPH
-//  ----------------------------------------------------------------------------
-.d-skeleton-paragraph {
-  width: 100%;
-
-  .d-skeleton-text {
-    margin-bottom: var(--dt-space-450);
-
-    &:last-child {
-      margin-bottom: var(--dt-space-0);
-    }
-  }
-}
-
-//  ============================================================================
-//  @   SKELETON TEXT
-//  ----------------------------------------------------------------------------
-.d-skeleton-text {
-  height: var(--dt-size-400);
-  border-radius: var(--dt-size-radius-200);
-}
-
-.d-skeleton-text--heading {
-  border-radius: var(--dt-size-radius-200);
-}

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

@@ -1,129 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: STACK
-//
-//  These are the styles for stack component.
-//
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • VISUAL STYLES
-//  • RESPONSIVE STYLE
-//  • SIZES
-
-//  @@  BASE STYLE
-//  ----------------------------------------------------------------------------
-
-.direction-options() {
-  &--column {
-    --stack-direction: column;
-
-    justify-content: flex-start;
-  }
-
-  &--column-reverse {
-    --stack-direction: column-reverse;
-
-    justify-content: flex-start;
-  }
-
-  &--row {
-    --stack-direction: row;
-
-    align-items: center;
-    justify-content: normal;
-  }
-
-  &--row-reverse {
-    --stack-direction: row-reverse;
-
-    align-items: center;
-    justify-content: normal;
-  }
-}
-
-.d-stack {
-  --stack-gap: 0;
-  --stack-direction: column;
-
-  display: flex;
-  flex-direction: var(--stack-direction);
-  gap: var(--stack-gap);
-  justify-content: flex-start;
-}
-
-//  ============================================================================
-//  $   VISUAL STYLES
-//  ----------------------------------------------------------------------------
-//  $$  COLUMN-REVERSE
-//  ----------------------------------------------------------------------------
-.d-stack--column-reverse {
-  --stack-direction: column-reverse;
-
-  justify-content: flex-start;
-}
-
-//  ----------------------------------------------------------------------------
-//  $$  ROW
-//  ----------------------------------------------------------------------------
-.d-stack--row {
-  --stack-direction: row;
-
-  align-items: center;
-  justify-content: normal;
-}
-
-//  ----------------------------------------------------------------------------
-//  $$  ROW-REVERSE
-//  ----------------------------------------------------------------------------
-.d-stack--row-reverse {
-  --stack-direction: row-reverse;
-
-  align-items: center;
-  justify-content: normal;
-}
-
-//  ============================================================================
-//  $   RESPONSIVE
-//  ----------------------------------------------------------------------------
-//  $$  EXTRA LARGE
-//  ----------------------------------------------------------------------------
-.d-stack--xl {
-  @media screen and (max-width: 1264px) {
-    .direction-options();
-  }
-}
-
-//  $$  LARGE
-//  ----------------------------------------------------------------------------
-.d-stack--lg {
-  @media screen and (max-width: 980px) {
-    .direction-options();
-  }
-}
-
-//  $$  MEDIUM
-//  ----------------
-.d-stack--md {
-  @media screen and (max-width: 640px) {
-    .direction-options();
-  }
-}
-
-//  $$ SMALL
-//  ----------------------------------------------------------------------------
-.d-stack--sm {
-  @media screen and (max-width: 480px) {
-    .direction-options();
-  }
-}
-
-//  ============================================================================
-//  $   SIZES
-//  ----------------------------------------------------------------------------
-.d-stack--gap-100 { --stack-gap: var(--dt-space-100); }
-.d-stack--gap-200 { --stack-gap: var(--dt-space-200); }
-.d-stack--gap-300 { --stack-gap: var(--dt-space-300); }
-.d-stack--gap-400 { --stack-gap: var(--dt-space-400); }
-.d-stack--gap-500 { --stack-gap: var(--dt-space-500); }
-.d-stack--gap-600 { --stack-gap: var(--dt-space-600); }

package/dist/css/lib/build/less/components/tab-panel.less

@@ -1,15 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Tab Panel
-//
-//  These are the styles for Tab Panel component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-tab-panel--hidden {
-  display: none;
-}

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

@@ -1,118 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: TABLES
-//
-//  These are table component classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/tables
-//
-//  TABLE OF CONTENTS
-//  • DEFAULT STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-table {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --table-color-border: var(--dt-color-border-default);
-    --table-th-color-text: var(--dt-color-foreground-secondary);
-    --table-td-color-text: var(--dt-color-foreground-tertiary);
-    --table-font-size: var(--dt-font-size-200);
-    --table-th-font-size: var(--dt-font-size-100);
-    --table-line-height: var(--dt-font-line-height-200);
-
-    display: table;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    font-size: var(--table-font-size);
-    line-height: var(--table-line-height);
-    border-collapse: collapse;
-    border-spacing: 0;
-
-    // Caption styles
-    .d-table__caption {
-      margin-bottom: var(--dt-space-400); // 8
-      color: var(--table-th-color-text);
-      font-weight: var(--dt-font-weight-bold);
-      font-size: var(--table-font-size);
-      .d-ta-unset();
-    }
-
-    // Table Head Styles
-    thead {
-        border-bottom: var(--dt-size-200) solid var(--table-color-border);
-
-        // Column Header Styles
-        th {
-            font-size: var(--table-th-font-size);
-            line-height: var(--dt-font-line-height-100);
-            text-transform: uppercase;
-        }
-    }
-
-    // Header Styles
-    th {
-        color: var(--table-th-color-text);
-        font-weight: var(--dt-font-weight-bold);
-    }
-
-    // Cell Styles
-    td {
-        color: var(--table-td-color-text);
-    }
-
-    // Header & Cell Styles
-    th,
-    td {
-        padding: var(--dt-space-500); // 16
-        text-align: left;
-        border-bottom: var(--dt-size-100) solid var(--table-color-border);
-    }
-
-    // Nested Table Body, First Row Styles, used internally on the Dialtone site
-    tbody + tbody tr:first-of-type {
-        // Header & Cell Styles
-        td,
-        th {
-            border-top: var(--dt-size-200) solid var(--table-color-border);
-        }
-    }
-
-    // Last Table Row Styles
-    tbody tr:last-of-type {
-        // Header & Cell Styles
-        td,
-        th {
-            border-bottom-width: 0;
-        }
-    }
-}
-
-//  ============================================================================
-//  $   INVERTED STYLE
-//  ----------------------------------------------------------------------------
-.d-table--inverted {
-    --table-th-color-text: var(--dt-color-foreground-secondary-inverted);
-    --table-td-color-text: var(--dt-color-foreground-tertiary-inverted);
-    --table-color-border: var(--dt-color-border-default-inverted);
-}
-
-//  ============================================================================
-//  $   STRIPED ROW BACKGROUNDS
-//  ----------------------------------------------------------------------------
-.d-table--striped {
-    // Row Styles
-    tr:nth-child(even) {
-        background-color: var(--dt-color-surface-secondary-opaque);
-    }
-
-    &.d-table--inverted {
-        // Row Styles
-        tr:nth-child(even) {
-            background-color: hsla(var(--bgc-primary-hsl) / 0.1);
-        }
-    }
-}