@dialpad/dialtone 9.0.3 → 9.1.0

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

@@ -1,139 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: BADGES
-//
-//  These are badge classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/badges
-//
-//  TABLE OF CONTENTS
-//  • COMPONENT CSS VARIABLES
-//  • BASE STYLE
-//  • KIND
-//  • TYPE
-//  • SLOTS
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-
-.d-badge {
-  //  COMPONENT CSS VARIABLES
-  //  --------------------------------------------------------------------------
-  --badge-color-text: var(--dt-badge-color-foreground-default);
-  --badge-color-background: var(--dt-badge-color-background-default);
-  --badge-radius: var(--dt-size-300);
-  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
-  --badge-font-size: var(--dt-font-size-100);
-  --badge-font-weight: var(--dt-font-weight-semi-bold);
-  --badge-gap: var(--dt-space-300);
-  --badge-letter-spacing: var(--dt-size-50);
-  --badge-padding-y: var(--dt-space-100);
-  --badge-padding-x: var(--dt-space-400);
-  --badge-text-case: none;
-  --badge-decorative-color: var(--dt-color-black-900);
-
-  //  BASE STYLE
-  //  --------------------------------------------------------------------------
-  display: inline-flex;
-  gap: var(--badge-gap);
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--dt-size-550);
-  padding: var(--badge-padding-y) var(--badge-padding-x);
-  color: var(--badge-color-text);
-  font-weight: var(--badge-font-weight);
-  font-size: var(--badge-font-size);
-  line-height: var(--badge-line-height);
-  letter-spacing: var(--badge-letter-spacing);
-  text-align: center;
-  text-transform: var(--badge-text-case);
-  background-color: var(--badge-color-background);
-  border-radius: var(--badge-radius);
-
-  //  Kind
-  //  --------------------------------------------------------------------------
-
-  &--count {
-    --badge-radius: var(--dt-size-radius-pill);
-    --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
-    --badge-padding-y: var(--dt-space-300);
-    --badge-line-height: var(--dt-size-500);
-  }
-
-  //  TYPE
-  //  --------------------------------------------------------------------------
-
-  &--info {
-    --badge-color-background: var(--dt-badge-color-background-info);
-  }
-
-  &--success {
-    --badge-color-background: var(--dt-badge-color-background-success);
-  }
-
-  &--warning {
-    --badge-color-background: var(--dt-badge-color-background-warning);
-  }
-
-  &--critical {
-    --badge-color-background: var(--dt-badge-color-background-critical);
-  }
-
-  &--bulletin {
-    --badge-color-text: var(--dt-badge-color-foreground-bulletin);
-    --badge-color-background: var(--dt-badge-color-background-bulletin);
-  }
-
-  &--ai {
-    --badge-color-text: var(--dt-badge-color-foreground-bulletin); // missing token or is ok to use this one?
-    --badge-color-background: var(--dt-color-magenta-300);
-
-    background-image: var(--dt-badge-color-background-ai);
-  }
-
-  &--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
-  &--decorate-black-500 { --badge-decorative-color: var(--dt-color-black-500); }
-  &--decorate-black-900 { --badge-decorative-color: var(--dt-color-black-900); }
-  &--decorate-red-200 { --badge-decorative-color: var(--dt-color-red-200); }
-  &--decorate-red-300 { --badge-decorative-color: var(--dt-color-red-300); }
-  &--decorate-red-400 { --badge-decorative-color: var(--dt-color-red-400); }
-  &--decorate-purple-200 { --badge-decorative-color: var(--dt-color-purple-200); }
-  &--decorate-purple-300 { --badge-decorative-color: var(--dt-color-purple-300); }
-  &--decorate-purple-400 { --badge-decorative-color: var(--dt-color-purple-400); }
-  &--decorate-purple-500 { --badge-decorative-color: var(--dt-color-purple-500); }
-  &--decorate-blue-200 { --badge-decorative-color: var(--dt-color-blue-200); }
-  &--decorate-blue-300 { --badge-decorative-color: var(--dt-color-blue-300); }
-  &--decorate-blue-400 { --badge-decorative-color: var(--dt-color-blue-400); }
-  &--decorate-green-300 { --badge-decorative-color: var(--dt-color-green-300); }
-  &--decorate-green-400 { --badge-decorative-color: var(--dt-color-green-400); }
-  &--decorate-green-500 { --badge-decorative-color: var(--dt-color-green-500); }
-  &--decorate-gold-300 { --badge-decorative-color: var(--dt-color-gold-300); }
-  &--decorate-gold-400 { --badge-decorative-color: var(--dt-color-gold-400); }
-  &--decorate-gold-500 { --badge-decorative-color: var(--dt-color-gold-500); }
-  &--decorate-magenta-200 { --badge-decorative-color: var(--dt-color-magenta-200); }
-  &--decorate-magenta-300 { --badge-decorative-color: var(--dt-color-magenta-300); }
-  &--decorate-magenta-400 { --badge-decorative-color: var(--dt-color-magenta-400); }
-
-  //  SLOTS
-  //  --------------------------------------------------------------------------
-
-  &__decorative {
-    display: inline-flex;
-    width: var(--dt-size-400);
-    height: var(--dt-size-400);
-    background-color: var(--badge-decorative-color);
-    border-radius: var(--dt-size-200);
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-  }
-
-  &__icon-left,
-  &__icon-right {
-    display: flex;
-  }
-}

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

@@ -1,77 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: BANNERS
-//
-//  These are the styles for banners, which are a type of notice used
-//  to alert users about important information relevant to them.
-//  For further documentation of these styles, please visit:
-//  https://dialpad.design/components/banners
-//
-//  ============================================================================
-//  $   BASE WRAPPER
-//  ----------------------------------------------------------------------------
-.d-banner {
-    //  Component CSS Vars
-    //  ------------------------------------------------------------------------
-    --banner-color-border: var(--dt-color-border-subtle);
-    --banner-line-height: var(--dt-font-line-height-200);
-    --banner-dialog-padding-y: var(--dt-space-400);
-    --banner-dialog-padding-x: var(--dt-space-500);
-
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: var(--zi-navigation-fixed);
-    max-width: 100%;
-    min-height: var(--dt-size-650); // 48
-    padding: 0;
-    line-height: var(--banner-line-height);
-    border-bottom: 1px solid var(--banner-color-border);
-    border-radius: 0;
-    box-shadow: none;
-
-    &[aria-hidden='true'] {
-        visibility: hidden;
-        opacity: 0;
-    }
-
-    &[aria-hidden='false'] {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    &--pinned {
-        z-index: calc(~'var(--zi-navigation-fixed) + 1');
-        transform: translate3d(0, 0, 0);
-    }
-}
-
-//  ============================================================================
-//  $   CONTENT CONTAINER
-//  ----------------------------------------------------------------------------
-.d-banner__dialog {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 128rem;
-    min-height: 100%;
-    margin: 0 auto;
-    padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
-
-    .d-notice__content {
-        flex-direction: row;
-        gap: var(--dt-space-300);
-        align-items: baseline;
-    }
-}
-
-//  ============================================================================
-//  $   STYLES
-//  ============================================================================
-//  $$  DEFAULT IMPORTANT
-//  ----------------------------------------------------------------------------
-.d-banner.d-banner--important {
-    --banner-color-border: transparent;
-}

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

@@ -1,88 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: BREADCRUMBS
-//
-//  These are breadcrumb classes for Dialpad's design system Dialtone.
-//  For further information, visit https://dialpad.design/components/breadcrumbs
-//
-//  TABLE OF CONTENTS
-//  • WRAPPER
-//  • INVERTED STYLE
-//  • ITEMS & LINKS
-//
-
-.d-breadcrumbs {
-    --breadcrumbs-font-size: var(--dt-font-size-200);
-    --breadcrumbs-line-height: var(--dt-font-line-height-300);
-    --breadcrumbs-color-separator: var(--dt-color-black-500);
-    --breadcrumbs-color-text: var(--dt-color-link-muted);
-
-    //  ============================================================================
-    //  $  INVERTED STYLE
-    //  ----------------------------------------------------------------------------
-    &--inverted {
-        --breadcrumbs-color-separator: var(--dt-color-black-400);
-        --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
-    }
-
-    //  ============================================================================
-    //  $  WRAPPER
-    //  ----------------------------------------------------------------------------
-
-    > ol {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: flex-start;
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font-size: var(--breadcrumbs-font-size);
-        line-height: var(--breadcrumbs-line-height);
-        list-style: none;
-    }
-
-    //  ============================================================================
-    //  $  ITEMS & LINKS
-    //  ----------------------------------------------------------------------------
-    &__item {
-        position: relative;
-        margin: 0 0 0 var(--dt-space-400);
-        padding: 0;
-        list-style: none;
-
-        //  Provide a forward slash with each element except when it's the last one.
-        &:not(:last-of-type) {
-            margin-right: var(--dt-space-450);
-
-            &::before {
-                position: absolute;
-                right: var(--dt-space-450-negative);
-                margin-top: var(--dt-space-100-negative);
-                color: var(--breadcrumbs-color-separator);
-                content: '/';
-            }
-        }
-
-        .d-link {
-            color: var(--breadcrumbs-color-text);
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-
-        //  --  SELECTED STATE (CURRENT PAGE)
-        &--selected {
-            --breadcrumbs-color-text: var(--dt-color-foreground-primary);
-
-            font-weight: var(--dt-font-weight-medium);
-            cursor: default;
-
-            .d-breadcrumbs--inverted & {
-                --breadcrumbs-color-text: var(--dt-color-foreground-primary-inverted);
-            }
-        }
-    }
-}
-