@dialpad/dialtone-css 1.0.0

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

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

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