@dialpad/dialtone-css 1.0.0

package/lib/build/less/components/button.less

@@ -0,0 +1,554 @@
+//
+//  DIALTONE
+//  COMPONENTS: BUTTONS
+//
+//  These are button classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/buttons
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • VISUAL STYLES
+//  • ALTERNATE STYLES
+//  • SIZES
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+
+.d-btn,
+.d-btn--md {
+    //  Component specific CSS Vars
+    //  ------------------------------------------------------------------------
+    --button-color-text: var(--dt-action-color-foreground-base-default);
+    --button-color-background: var(--dt-action-color-background-base-default);
+    --button-color-border: transparent;
+    --button-gap: calc(var(--button-padding-x) / 2);
+    --button-border-radius: var(--dt-size-400);
+    --button-border-width: var(--dt-size-100);
+    --button-font-size: var(--dt-font-size-200);
+    --button-font-weight: var(--dt-font-weight-medium);
+    --button-line-height-xs: var(--dt-font-line-height-200); // TODO: these used to vary, remove if all wind up all the same
+    --button-line-height-sm: var(--dt-font-line-height-200); // TODO: these used to vary, remove if all wind up all the same
+    --button-line-height-md: var(--dt-font-line-height-200); // TODO: these used to vary, remove if all wind up all the same
+    --button-line-height-lg: var(--dt-font-line-height-200); // TODO: these used to vary, remove if all wind up all the same
+    --button-line-height-xl: var(--dt-font-line-height-200); // TODO: these used to vary, remove if all wind up all the same
+    --button-line-height: var(--button-line-height-md);
+    --button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width)); // ((8 - 1) - border-width)
+    --button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width)); // 8 minus border-width
+    --button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width)); // 8 minus border-width
+    --button-padding-x-sm: calc(var(--dt-space-450) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-y-md: calc(var(--dt-space-400) - var(--button-border-width)); // 8 minus border-width
+    --button-padding-x-md: calc(var(--dt-space-450) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-y-lg: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--button-border-width)); // 10 minus border-width
+    --button-padding-x-lg: calc(var(--dt-space-500) - var(--button-border-width)); // 16 minus border-width
+    --button-padding-y-xl: calc(var(--dt-space-450) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-x-xl: calc(var(--dt-space-500) - var(--button-border-width)); // 16 minus border-width
+    --button-padding-y: var(--button-padding-y-md);
+    --button-padding-x: var(--button-padding-x-md);
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--button-gap);
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--button-padding-y) var(--button-padding-x);
+    color: var(--button-color-text);
+    font-weight: var(--button-font-weight);
+    font-size: var(--button-font-size);
+    font-family: inherit;
+    line-height: var(--button-line-height);
+    text-transform: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+    background-color: var(--button-color-background);
+    border-color: var(--button-color-border);
+    border-style: solid;
+    border-width: var(--button-border-width);
+    border-radius: var(--button-border-radius);
+    box-shadow: var(--button--bs);
+    cursor: pointer;
+    transition-timing-function: var(--ttf-out-quint);
+    transition-duration: var(--td200);
+    transition-property: background-color, border, box-shadow;
+    user-select: none;
+    fill: currentColor;
+
+    //  --  STATES
+    //  ------------------------------------------------------------------------
+    &:hover:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-base-hover);
+        --button-color-background: var(--dt-action-color-background-base-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-base-active);
+        --button-color-background: var(--dt-action-color-background-base-active);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--dt-shadow-focus);
+    }
+
+    &[disabled] {
+        --button-color-border: transparent !important;
+        --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
+        --button-color-background: var(--dt-action-color-background-disabled-default) !important;
+
+        cursor: not-allowed;
+        transition: none;
+    }
+}
+
+//  ============================================================================
+//  $   SIZES
+//  ----------------------------------------------------------------------------
+//  $$  EXTRA SMALL
+//  ----------------------------------------------------------------------------
+.d-btn--xs {
+    --button-padding-y: var(--button-padding-y-xs);
+    --button-padding-x: var(--button-padding-x-xs);
+    --button-font-size: var(--dt-font-size-100);
+    --button-line-height: var(--button-line-height-xs);
+    --button-border-radius: var(--dt-size-300);
+}
+
+//  $$ SMALL
+//  ----------------------------------------------------------------------------
+.d-btn--sm {
+    --button-padding-y: var(--button-padding-y-sm);
+    --button-padding-x: var(--button-padding-x-sm);
+    --button-font-size: var(--dt-font-size-100);
+    --button-line-height: var(--button-line-height-sm);
+}
+
+//  $$  MEDIUM
+//  ----------------
+.d-btn--md {
+    //
+}
+
+//  $$  LARGE
+//  ----------------------------------------------------------------------------
+.d-btn--lg {
+    --button-padding-y: var(--button-padding-y-lg);
+    --button-padding-x: var(--button-padding-x-lg);
+    --button-font-size: var(--dt-font-size-300);
+    --button-line-height: var(--button-line-height-lg);
+    --button-border-radius: var(--dt-size-450);
+}
+
+//  $$  EXTRA LARGE
+//  ----------------------------------------------------------------------------
+.d-btn--xl {
+    --button-padding-y: var(--button-padding-y-xl);
+    --button-padding-x: var(--button-padding-x-xl);
+    --button-font-size: var(--dt-font-size-400);
+    --button-font-weight: var(--dt-font-weight-normal);
+    --button-line-height: var(--button-line-height-xl);
+    --button-border-radius: var(--dt-size-500);
+}
+
+//  ============================================================================
+//  $   BUTTON LABEL
+//  ----------------------------------------------------------------------------
+.d-btn__label {
+    display: inline-flex;
+    flex: 1 auto;
+    align-items: center;
+    justify-content: center;
+    // background-color: rgba(0,0,0,.5);
+}
+
+//  ============================================================================
+//  $   BUTTON WITH ICON
+//  ----------------------------------------------------------------------------
+.d-btn--vertical {
+    flex-direction: column;
+}
+
+.d-btn__icon {
+    display: flex;
+    // background-color: rgba(0,0,0,.5);
+
+    .d-icon {
+        // outline: 1px solid red;
+        // opacity: 0;
+    }
+}
+
+
+.d-btn__icon--left,
+.d-btn__icon--top {
+    order: -1;
+}
+
+.d-btn__icon--right,
+.d-btn__icon--bottom {
+    order: 1;
+}
+
+.d-btn__icon--left:not(:only-child) {
+    margin-left: var(--dt-space-200-negative);
+}
+
+.d-btn__icon--right:not(:only-child) {
+    margin-right: var(--dt-space-200-negative);
+}
+
+//  ============================================================================
+//  $   VISUAL STYLES
+//  ----------------------------------------------------------------------------
+//  $$  CIRCLE BUTTONS
+//  ----------------------------------------------------------------------------
+.d-btn--circle {
+    --button-padding-x: var(--button-padding-y-md);
+    --button-padding-y: var(--button-padding-y-md);
+    --button-color-text: var(--dt-action-color-foreground-muted-default);
+    --button-border-radius: var(--dt-size-radius-circle);
+
+    &:hover:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-muted-hover);
+        --button-color-background: var(--dt-action-color-background-muted-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-muted-active);
+        --button-color-background: var(--dt-action-color-background-muted-active);
+    }
+
+    .d-btn__icon {
+        margin: unset;
+    }
+
+    &.d-btn__label {
+        display: none;
+    }
+
+    &.d-btn--outlined {
+        --button-color-border: var(--dt-action-color-border-muted-outlined-default);
+    }
+
+    // Adjust padding based on sizes
+    &.d-btn--xs {
+        --button-padding-y: var(--button-padding-y-xs);
+        --button-padding-x: var(--button-padding-y-xs);
+    }
+
+    &.d-btn--sm {
+        --button-padding-y: var(--button-padding-y-sm);
+        --button-padding-x: var(--button-padding-y-sm);
+    }
+
+    &.d-btn--md {
+        --button-padding-x: var(--button-padding-y-md);
+        --button-padding-y: var(--button-padding-y-md);
+    }
+
+    &.d-btn--lg {
+        --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-space-100));
+        --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-space-100));
+    }
+
+    &.d-btn--xl {
+        --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-space-300));
+        --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-space-300));
+    }
+}
+
+//  $$  OUTLINED BUTTON
+//  ----------------------------------------------------------------------------
+.d-btn--outlined {
+    --button-color-border: var(--dt-action-color-border-base-outlined-default);
+}
+
+//  $$  PRIMARY BUTTON
+//  ----------------------------------------------------------------------------
+.d-btn--primary {
+    --button-color-text: var(--dt-action-color-foreground-base-primary-default);
+    --button-color-background: var(--dt-action-color-background-base-primary-default);
+
+    &:hover:not([disabled]) {
+      --button-color-text: var(--dt-action-color-foreground-base-primary-default);
+      --button-color-background: var(--dt-action-color-background-base-primary-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+      --button-color-text: var(--dt-action-color-foreground-base-primary-default);
+      --button-color-background: var(--dt-action-color-background-base-primary-active);
+    }
+}
+
+//  $$  MUTED BUTTON
+//  ----------------------------------------------------------------------------
+.d-btn--muted {
+    --button-color-text: var(--dt-action-color-foreground-muted-default);
+
+    &:hover:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-muted-hover);
+        --button-color-background: var(--dt-action-color-background-muted-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-muted-active);
+        --button-color-background: var(--dt-action-color-background-muted-active);
+    }
+
+    &.d-btn--outlined {
+        --button-color-border: var(--dt-action-color-border-muted-outlined-default);
+    }
+}
+
+//  $$  DANGER BUTTON
+//  ----------------------------------------------------------------------------
+.d-btn--danger {
+    --button-color-text: var(--dt-action-color-foreground-critical-default);
+    --button-color-background: var(--dt-action-color-background-critical-default);
+
+    &:hover:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-critical-hover);
+        --button-color-background: var(--dt-action-color-background-critical-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-critical-active);
+        --button-color-background: var(--dt-action-color-background-critical-active);
+    }
+
+    &.d-btn--outlined {
+        --button-color-border: var(--dt-action-color-border-critical-outlined-default);
+    }
+
+    &.d-btn--primary {
+        --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
+        --button-color-background: var(--dt-action-color-background-critical-primary-default);
+
+        &:hover:not([disabled]) {
+            --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
+            --button-color-background: var(--dt-action-color-background-critical-primary-hover);
+        }
+
+        &:active:not([disabled]),
+        &.d-btn--active:not([disabled]),
+        &.d-btn--active:active:not([disabled]) {
+            --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
+            --button-color-background: var(--dt-action-color-background-critical-primary-active);
+        }
+    }
+}
+
+//  $$  INVERTED BUTTON
+//  ----------------------------------------------------------------------------
+//  --  Base, clear inverted button
+.d-btn--inverted {
+    --button-color-text: var(--dt-action-color-foreground-inverted-default);
+    --button-color-background: var(--dt-action-color-background-inverted-default);
+
+    &:hover:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-inverted-hover);
+        --button-color-background: var(--dt-action-color-background-inverted-hover);
+    }
+
+    &:active:not([disabled]),
+    &.d-btn--active:not([disabled]),
+    &.d-btn--active:active:not([disabled]) {
+        --button-color-text: var(--dt-action-color-foreground-inverted-active);
+        --button-color-background: var(--dt-action-color-background-inverted-active);
+    }
+
+    //  --  OUTLINED
+    &.d-btn--outlined {
+        --button-color-border: var(--dt-action-color-border-inverted-outlined-default);
+    }
+
+    //  --  PRIMARY
+    &.d-btn--primary {
+        --button-color-text: var(--dt-action-color-foreground-inverted-primary-default);
+        --button-color-background: var(--dt-action-color-background-inverted-primary-default);
+
+        &:hover:not([disabled]) {
+            --button-color-text: var(--dt-action-color-foreground-inverted-primary-hover);
+            --button-color-background: var(--dt-action-color-background-inverted-primary-hover);
+        }
+
+        &:active:not([disabled]),
+        &.d-btn--active:not([disabled]),
+        &.d-btn--active:active:not([disabled]) {
+            --button-color-text: var(--dt-action-color-foreground-inverted-primary-active);
+            --button-color-background: var(--dt-action-color-background-inverted-primary-active);
+        }
+    }
+}
+
+//  $$  ICON ONLY
+//  ----------------------------------------------------------------------------
+.d-btn--icon-only {
+    --button-padding-x: var(--button-padding-y-md);
+    --button-padding-y: var(--button-padding-y-md);
+
+    .d-btn__icon {
+        margin: unset;
+    }
+
+    //  Adjust padding based on sizes
+    &.d-btn--xs {
+        --button-padding-y: var(--button-padding-y-xs);
+        --button-padding-x: var(--button-padding-y-xs);
+    }
+
+    &.d-btn--sm {
+        --button-padding-y: var(--button-padding-y-sm);
+        --button-padding-x: var(--button-padding-y-sm);
+    }
+
+    &.d-btn--md {
+        --button-padding-x: var(--button-padding-y-md);
+        --button-padding-y: var(--button-padding-y-md);
+    }
+
+    &.d-btn--lg {
+        --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-space-100));
+        --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-space-100));
+    }
+
+    &.d-btn--xl {
+        --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-space-300));
+        --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-space-300));
+    }
+}
+
+//  $$  LOADING STATE
+//  ----------------------------------------------------------------------------
+.d-btn--loading {
+    .d-btn-loading();
+}
+
+//  $$  DISABLED STATE
+//  ----------------------------------------------------------------------------
+.d-btn--disabled {
+    --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
+    --button-color-background: var(--dt-action-color-background-disabled-default) !important;
+    --button-color-border: transparent !important;
+
+    cursor: not-allowed;
+    transition: none;
+    pointer-events: none;
+}
+
+//  $$  BRAND BUTTONS
+//  ----------------------------------------------------------------------------
+.d-btn--brand {
+    --button-color-text: var(--dt-color-neutral-white);
+    --button-color-background: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
+
+    display: flex;
+
+    &:hover:not([disabled]),
+    &:active:not([disabled]) {
+        --button-color-text: hsla(var(--dt-color-neutral-white-hsl) ~' / ' 90%);
+        --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 var(--dt-space-100) var(--dt-color-neutral-white), 0 0 0 0.25em hsla(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) ~' / ' 90%);
+    }
+
+    &:active:not([disabled]) {
+        --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
+    }
+
+    .d-btn__icon {
+      align-items: center;
+      justify-content: center;
+      width: 2em;
+      height: 2em;
+      margin-right: var(--dt-space-400);
+      margin-left: var(--dt-space-300-negative);
+      background-color: var(--dt-color-neutral-white);
+      border-radius: var(--dt-size-radius-200);
+    }
+
+    .d-btn__label {
+        flex: 1 auto;
+    }
+}
+
+//  --  GOOGLE
+.d-btn--google {
+    --brand-color-h: 217;
+    --brand-color-s: 89%;
+    --brand-color-l: 61%;
+}
+//  --  OFFICE 365
+.d-btn--o365 {
+    --brand-color-h: 15;
+    --brand-color-s: 99%;
+    --brand-color-l: 46%;
+}
+//  --  LINKEDIN
+.d-btn--linkedin {
+    --brand-color-h: 197;
+    --brand-color-s: 100%;
+    --brand-color-l: 26%;
+}
+
+//  ============================================================================
+//  @   BUTTON LOADER
+//      Changes the button
+//  ----------------------------------------------------------------------------
+//  @@  BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-btn-loading() {
+    //  Disable clicking while the loader is in place
+    pointer-events: none;
+
+    //  Hide anything that was there before
+    .d-btn__icon,
+    .d-btn__label {
+        opacity: 0;
+        transition: opacity 50ms var(--ttf-in-out);
+    }
+
+    //  Show the loading animation
+    &::before {
+        position: absolute;
+        width: var(--dt-size-500);
+        height: var(--dt-size-500);
+        border: var(--dt-size-200) solid currentColor;
+        border-left-color: transparent !important;
+        border-radius: var(--dt-size-radius-circle);
+        animation: d-loading-circle 900ms infinite linear;
+        content: '';
+    }
+}
+
+//  ============================================================================
+//  $   BUTTON GROUP
+//  ----------------------------------------------------------------------------
+.d-btn-group {
+    display: flex;
+
+    &--start {
+        justify-content: flex-start;
+    }
+
+    &--end {
+        justify-content: flex-end;
+    }
+
+    &--space-between {
+        justify-content: space-between;
+    }
+}

package/lib/build/less/components/card.less

@@ -0,0 +1,56 @@
+//
+//  DIALTONE
+//  COMPONENTS: CARD
+//
+//  These are card classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/card
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • HEADER
+//  • CONTENT
+//  • FOOTER
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ============================================================================
+//  $$  WRAPPER
+//  ----------------------------------------------------------------------------
+.d-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--dt-color-surface-primary);
+  border-radius: var(--dt-size-300);
+  box-shadow: var(--dt-shadow-card);
+}
+
+
+//  ============================================================================
+//  $   CARD AREAS
+//  ----------------------------------------------------------------------------
+//  $$  HEADER
+//  ----------------------------------------------------------------------------
+.d-card__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dt-size-500) var(--dt-size-500) 0;
+}
+
+//  $$  CONTENT
+//  ----------------------------------------------------------------------------
+.d-card__content {
+  padding: var(--dt-space-500);
+  overflow-y: auto;
+}
+
+//  $$  FOOTER
+//  ----------------------------------------------------------------------------
+.d-card__footer {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--dt-space-500) var(--dt-space-500);
+}