@dialpad/dialtone-css 1.0.0

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

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

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

@@ -0,0 +1,129 @@
+//
+//  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/lib/build/less/components/tab-panel.less

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

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