npm - @dialpad/dialtone - Versions diffs - 8.13.6 → 8.14.0 - Mend

@dialpad/dialtone 8.13.6 → 8.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +24 -5
package/lib/build/less/components/banner.less +3 -66
package/lib/build/less/components/emoji-picker.less +1 -1
package/lib/build/less/components/notice.less +13 -13
package/lib/build/less/components/selects.less +6 -0
package/lib/build/less/components/toast.less +4 -76
package/lib/build/less/dialtone.less +2 -2
package/lib/dist/css/dialtone.css +1520 -1609
package/lib/dist/css/dialtone.min.css +1 -1
package/package.json +3 -3

package/README.md CHANGED Viewed

@@ -2,19 +2,38 @@
 This is the home for Dialtone, Dialpad's design system. It includes the resources needed to create consistent, predictable interfaces that conform to Dialpad’s design principles, language, styles, and best practices.
-## Install Dialtone via NPM
-To add Dialtone into your project, you can install it via NPM:
+## Install Dialtone
+### Install it via NPM:
 ```
 npm install @dialpad/dialtone
 ```
-Once installed, add the following line in your CSS/LESS file:
+### Import dialtone:
+- CSS/LESS:
+```less
+@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.min.css";
+```
+- Javascript:
+```js
+import '@dialpad/dialtone/lib/dist/css/dialtone.min.css';
 ```
-@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.css";
+### Add dialtone's theme class to the `<body>`
+- Light mode
+```html
+<body class="dialtone-theme-light">...</body>
 ```
+- Dark mode
+```html
+<body class="dialtone-theme-dark">...</body>
+```
+This will define the Dialtone CSS variables for your desired theme.
+It is required to do this for Dialtone to function.
 ## Building Dialtone locally
 To build Dialtone locally, visit our [installation instructions](https://dialpad.design/guides/getting-started/#build-dialtone-locally).

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

@@ -13,11 +13,7 @@
 .d-banner {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --banner-color-background: var(--dt-color-surface-secondary);
-    --banner-color-text: var(--dt-color-foreground-primary);
-    --notice-color-icon: var(--toast-color-text);
     --banner-color-border: var(--dt-color-border-subtle);
-    --banner-font-size: var(--dt-font-size-200);
     --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);
@@ -27,22 +23,15 @@
     right: 0;
     left: 0;
     z-index: var(--zi-navigation-fixed);
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
+    max-width: 100%;
     min-height: var(--dt-size-650); // 48
-    color: var(--banner-color-text);
-    font-size: var(--banner-font-size);
+    padding: 0;
     line-height: var(--banner-line-height);
-    background-color: var(--banner-color-background);
     border-bottom: 1px solid var(--banner-color-border);
     border-radius: 0;
     box-shadow: none;
-    // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: var(--dt-size-650);
         visibility: hidden;
         opacity: 0;
     }
@@ -52,17 +41,12 @@
         opacity: 1;
     }
-    //  If you want to put the banner above the topbar
-    &.d-banner--pinned {
+    &--pinned {
         z-index: calc(~'var(--zi-navigation-fixed) + 1');
         transform: translate3d(0, 0, 0);
     }
 }
-.d-banner--transform {
-    transform: translate3d(0, var(--topbar-height), 0);
-}
 //  ============================================================================
 //  $   CONTENT CONTAINER
 //  ----------------------------------------------------------------------------
@@ -89,52 +73,5 @@
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-banner.d-banner--important {
-    --banner-color-background: var(--dt-color-surface-strong);
-    --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    --notice-color-icon: var(--dt-color-foreground-primary-inverted);
     --banner-color-border: transparent;
 }
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.d-banner--error {
-    --banner-color-background: var(--dt-color-surface-critical);
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-critical-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.d-banner--info {
-    --banner-color-background: var(--dt-color-surface-info);
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-info-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-banner--success {
-    --banner-color-background: var(--dt-color-surface-success);
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-surface-success-strong);
-        --banner-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-banner--warning {
-    --banner-color-background: var(--dt-color-surface-warning);
-    &.d-banner--important {
-        --banner-color-background: var(--dt-color-gold-200);
-        --banner-color-text: var(--dt-color-foreground-primary);
-    }
-}

package/lib/build/less/components/emoji-picker.less CHANGED Viewed

@@ -136,7 +136,7 @@
     top: 0;
     width: 100%;
     padding-top: var(--dt-space-525);
-    background: var(--dt-color-surface-secondary);
+    background: var(--dt-color-surface-primary);
   }
   &__list {

package/lib/build/less/components/notice.less CHANGED Viewed

@@ -10,7 +10,9 @@
 //  $   BASE WRAPPER
 //  ----------------------------------------------------------------------------
-.d-notice {
+.d-notice,
+.d-banner,
+.d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
     --notice-color-background: var(--dt-color-surface-secondary);
@@ -37,12 +39,6 @@
     background-color: var(--notice-color-background);
     border-radius: var(--notice-border-radius);
     box-shadow: var(--notice-box-shadow);
-    .d-toast & {
-        max-width: var(--dt-size-975);
-        box-shadow: var(--dt-shadow-small);
-        pointer-events: all;
-    }
 }
 //  ============================================================================
@@ -64,6 +60,10 @@
     flex: 0 auto;
     gap: var(--dt-space-400);
     align-items: center;
+    button {
+        color: var(--notice-color-text);
+    }
 }
 //  $$  ICON
@@ -98,11 +98,13 @@
 //  ============================================================================
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
-.d-notice.d-notice--important {
+.d-notice.d-notice--important,
+.d-banner.d-banner--important,
+.d-toast.d-toast--important {
     --notice-color-background: var(--dt-color-surface-strong);
     --notice-color-text: var(--dt-color-foreground-primary-inverted);
+    --notice-color-icon: var(--notice-color-text);
     --notice-color-shadow: transparent;
-    --notice-color-icon: var(--dt-color-foreground-primary-inverted);
 }
 //  $$  ERROR
@@ -117,7 +119,6 @@
     &.d-banner--important,
     &.d-toast--important {
         --notice-color-background: var(--dt-color-surface-critical-strong);
-        --notice-color-text: var(--dt-color-foreground-primary-inverted);
     }
 }
@@ -164,8 +165,7 @@
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--dt-color-gold-200);
-        --notice-color-text: var(--dt-color-foreground-primary);
-        --notice-color-icon: var(--notice-color-text);
+        --notice-color-background: var(--dt-color-surface-warning-strong);
+        --notice-color-text: var(--dt-color-neutral-black);
     }
 }

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

@@ -53,6 +53,12 @@
   // 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);

package/lib/build/less/components/toast.less CHANGED Viewed

@@ -25,28 +25,15 @@
 .d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --toast-color-background: var(--dt-color-surface-secondary);
-    --toast-color-text: var(--dt-color-foreground-primary);
-    --notice-color-icon: var(--toast-color-text);
-    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) ~' / ' 15%);
-    --toast-padding: var(--dt-space-500);
-    --toast-border-radius: var(--dt-size-400);
+    --toast-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
     --toast-box-shadow: 0 0 0 var(--dt-size-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
-    --toast-font-size: var(--dt-font-size-200);
-    --toast-line-height: var(--dt-font-line-height-300);
     z-index: var(--zi-notification);
-    box-sizing: border-box;
-    width: 100%;
-    max-width: var(--dt-size-1020); // 628
-    padding: var(--toast-padding);
-    color: var(--toast-color-text);
-    font-size: var(--toast-font-size);
-    line-height: var(--toast-line-height);
+    display: block;
+    max-width: var(--dt-size-975);
     word-break: normal;
-    background-color: var(--toast-color-background);
-    border-radius: var(--toast-border-radius);
     box-shadow: var(--toast-box-shadow);
+    pointer-events: all;
     //  If there's a link in a toast, break the url so it wraps
     > a {
@@ -73,70 +60,11 @@
     display: flex;
     align-items: center;
-    .d-notice__content {
-        margin-right: var(--dt-space-500); // 16
-    }
     .d-notice__actions {
         margin-left: var(--dt-space-600); // 32
     }
 }
-//  ============================================================================
-//  $   STYLES
-//  ============================================================================
-//  $$  DEFAULT IMPORTANT
-//  ----------------------------------------------------------------------------
-.d-toast.d-toast--important {
-    --toast-color-background: var(--dt-color-surface-strong);
-    --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    --notice-color-icon: var(--toast-color-text);
-  }
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.d-toast--error {
-    --toast-color-background: var(--dt-color-surface-critical);
-    &.d-toast--important {
-      --toast-color-background: var(--dt-color-red-400);
-      --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.d-toast--info {
-    --toast-color-background: var(--dt-color-surface-info);
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-info-strong);
-        --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-toast--success {
-    --toast-color-background: var(--dt-color-surface-success);
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-success-strong);
-        --toast-color-text: var(--dt-color-foreground-primary-inverted);
-    }
-}
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-toast--warning {
-    --toast-color-background: var(--dt-color-surface-warning);
-    &.d-toast--important {
-        --toast-color-background: var(--dt-color-surface-warning-strong);
-        --toast-color-text: var(--dt-color-foreground-primary);
-    }
-}
 //  ============================================================================
 //  $   UC Toast Shims
 //  ============================================================================

package/lib/build/less/dialtone.less CHANGED Viewed

@@ -13,7 +13,6 @@
 //  --  COMPONENTS
 @import 'components/avatar';
 @import 'components/badge';
-@import 'components/banner';
 @import 'components/breadcrumbs';
 @import 'components/button';
 @import 'components/card';
@@ -25,8 +24,9 @@
 @import 'components/link';
 @import 'components/list-group'; // Dialtone 5 shim
 @import 'components/modal';
-@import 'components/toast'; // Needs to come before Notice styles
 @import 'components/notice';
+@import 'components/toast';
+@import 'components/banner';
 @import 'components/popover';
 @import 'components/radio-checkbox';
 @import 'components/selects';