@dialpad/dialtone 7.11.2 → 7.13.0

package/lib/build/less/components/input.less

@@ -29,23 +29,17 @@
 .d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input-color-border-focus: var(--purple-400);
-    --input-color-border: hsla(var(--black-900-hsl) ~' / ' 9%);
-    --input-color-background: hsla(var(--black-900-hsl) ~' / ' 3%);
-    --input-color-background-disabled: hsla(var(--black-900-hsl) ~' / ' 12%);
+    --input-color-border: hsla(var(--black-900-hsl) / 0.09);
+    --input-color-background: hsla(var(--black-900-hsl) / 0.03);
+    --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
+    --input-color-text: var(--fc-secondary);
     --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
     --input-border-radius: var(--size-400);
     --input-padding-y: calc(var(--space-400) - var(--input-border-width));
     --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
-    --input-color-text: var(--fc-secondary);
     --input-font-size: var(--fs-200);
     --input-line-height: var(--lh-200);
 
-    .bg-test & {
-        --input-color-border: var(--black-300);
-        --input-color-background: var(--black-100);
-    }
-
     position: relative;
     display: inline-flex;
     flex: 1 0%;
@@ -64,8 +58,8 @@
     outline: none;
     box-shadow: none;
     transition-timing-function: var(--ttf-in-out);
-    transition-duration: 100ms;
-    transition-property: border, box-shadow, background-color;
+    transition-duration: var(--td100);
+    transition-property: box-shadow, background-color;
     appearance: none;
 
     //  --  Placeholder copy
@@ -76,13 +70,13 @@
     &::-ms-clear {
         display: none;
     }
-    //  --  FOCUS
+    //  --  FOCUS STATE
     &:focus,
     &:focus-within {
-        --input-color-border: var(--input-color-border-focus);
+        --input-color-background: hsla(var(--black-900-hsl) / 0.01);
+        --input-color-border: var(--color-focus-ring) !important;
 
-        outline: 0;
-        box-shadow: var(--bs-focus-ring) !important;
+        box-shadow: 0 0 0 var(--size-100) var(--color-focus-ring) inset;
     }
     //  --  DISABLED / READ-ONLY
     &[disabled],
@@ -217,34 +211,16 @@
 .d-input--warning,
 .d-textarea--warning {
     --input-color-border: var(--gold-400) !important;
-    --input-color-border-focus: var(--warning-color);
-
-    &:focus,
-    &:focus-within {
-        box-shadow: var(--bs-focus-ring-warning) !important;
-    }
 }
 
 .d-input--error,
 .d-textarea--error {
-    --input-color-border: var(--error-color) !important;
-    --input-color-border-focus: var(--error-color);
-
-    &:focus,
-    &:focus-within {
-        box-shadow: var(--bs-focus-ring-error) !important;
-    }
+    --input-color-border: var(--red-300) !important;
 }
 
 .d-input--success,
 .d-textarea--success {
-    --input-color-border: var(--success-color) !important;
-    --input-color-border-focus: var(--success-color);
-
-    &:focus,
-    &:focus-within {
-        box-shadow: var(--bs-focus-ring-success) !important;
-    }
+    --input-color-border: var(--green-400) !important;
 }
 
 //  ============================================================================

package/lib/build/less/components/link.less

@@ -14,19 +14,25 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-link {
+    --link-color-default: var(--purple-400);
+    --link-color-default-hover: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+
     position: relative;
     display: inline-flex;
+    gap: var(--space-300);
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: var(--purple-400);
+    color: var(--link-color-default);
     font: inherit;
-    text-decoration: underline;
+    text-decoration: none;
     background-color: transparent;
     border: 0;
-    transition: all var(--td25) var(--ttf-in-out);
+    transition-timing-function: var(--ttf-out-quint);
+    transition-duration: var(--td200);
+    transition-property: background-color, border, box-shadow;
 
     //  Reset button appearance
     -webkit-appearance: none;
@@ -35,125 +41,80 @@
     fill: currentColor;
 
     &:hover {
-        color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
-        text-decoration: none;
+        color: var(--link-color-default-hover);
+        text-decoration: underline;
         cursor: pointer;
     }
 
     &:focus-visible {
-        border-radius: var(--br4);
         outline: none;
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring);
-    }
-}
-
-
-//  ============================================================================
-//  $   ALTERNATE STYLES
-//  ============================================================================
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.d-link--warning {
-    color: var(--fc-warning);
-
-    &:hover {
-        color: var(--fc-warning-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-warning);
-    }
-}
-
-//  $$  DANGER
-//  ----------------------------------------------------------------------------
-.d-link--danger {
-    color: var(--fc-error);
-
-    &:hover {
-        color: var(--error-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-error);
-    }
-}
-
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.d-link--success {
-    color: var(--fc-success);
-
-    &:hover {
-        color: var(--success-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-success);
-    }
-}
-
-//  $$  MUTED
-//  ----------------------------------------------------------------------------
-.d-link--muted {
-    color: var(--muted-color);
-
-    &:hover {
-        color: var(--muted-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-muted);
-    }
-}
-
-//  $$  DISABLED
-//  ----------------------------------------------------------------------------
-// We don't expose these in the documentation because they're meant to be consumed
-// by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
-.d-link[disabled],
-.d-link--disabled {
-    color: var(--fc-disabled);
-
-    &:hover {
-        color: var(--fc-disabled);
-        text-decoration: underline;
-        cursor: not-allowed;
-    }
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-//  $$  INVERTED
-//  ----------------------------------------------------------------------------
-.d-link--inverted {
-    color: var(--inverted-color);
-
-    &:hover {
-        color: var(--inverted-color-hover);
-    }
-
-    &:focus-visible {
-        box-shadow: 0 0 0 var(--size-200) var(--focus-ring-inverted);
-    }
-}
-
-//  $$  INVERTED DISABLED
-//  ----------------------------------------------------------------------------
-// We don't expose these in the documentation because they're meant to be consumed
-// by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
-.d-link--inverted-disabled {
-    color: var(--black-500);
-
-    &:hover {
-        color: var(--black-500);
-        text-decoration: underline;
-        cursor: not-allowed;
-    }
-
-    &:focus {
-        box-shadow: none;
+        box-shadow: var(--bs-focus-ring);
+    }
+
+    //  ============================================================================
+    //  $   ALTERNATE STYLES
+    //  ============================================================================
+    //  $$  WARNING
+    //  ----------------------------------------------------------------------------
+    &--warning {
+        --link-color-default: var(--fc-warning);
+        --link-color-default-hover: var(--fc-warning-hover);
+    }
+
+    //  $$  DANGER
+    //  ----------------------------------------------------------------------------
+    &--danger {
+        --link-color-default: var(--fc-critical);
+        --link-color-default-hover: hsl(var(--red-300-h), var(--red-300-s), calc(var(--red-300-l) - 8%));
+    }
+
+    //  $$  SUCCESS
+    //  ----------------------------------------------------------------------------
+    &--success {
+        --link-color-default: var(--fc-success);
+        --link-color-default-hover: var(--green-500);
+    }
+
+    //  $$  MUTED
+    //  ----------------------------------------------------------------------------
+    &--muted {
+        --link-color-default: var(--fc-secondary);
+        --link-color-default-hover: var(--fc-primary);
+    }
+
+    //  $$  DISABLED
+    //  ----------------------------------------------------------------------------
+    // We don't expose these in the documentation because they're meant to be consumed
+    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
+    &[disabled],
+    &--disabled {
+        --link-color-default: var(--fc-disabled);
+        --link-color-default-hover: var(--link-color-default);
+
+        &:hover {
+            text-decoration: none;
+            cursor: not-allowed;
+        }
+    }
+
+    //  $$  INVERTED
+    //  ----------------------------------------------------------------------------
+    &--inverted {
+        --link-color-default: var(--fc-secondary-inverted);
+        --link-color-default-hover: var(--fc-primary-inverted);
+    }
+
+    //  $$  INVERTED DISABLED
+    //  ----------------------------------------------------------------------------
+    // We don't expose these in the documentation because they're meant to be consumed
+    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
+    &--inverted-disabled {
+        --link-color-default: var(--black-400);
+        --link-color-default-hover: var(--link-color-default);
+
+        &:hover {
+            text-decoration: none;
+            cursor: not-allowed;
+        }
     }
 }

package/lib/build/less/components/modal.less

@@ -27,13 +27,13 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 60%);
+    --modal-backdrop-color-background: hsla(var(--bgc-contrast-hsl) / 0.7);
     --modal-dialog-padding: var(--space-600);
-    --modal-dialog-color-background: var(--white);
+    --modal-dialog-color-background: var(--bgc-primary);
     --modal-dialog-color-text: var(--fc-tertiary);
     --modal-header-color-text: var(--fc-secondary);
-    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) ~' / ' 10%);
-    --modal-dialog-shadow: 0 0 0 1px var(--modal-dialog-color-shadow), var(--bs-card);
+    --modal-dialog-color-shadow: hsla(var(--black-900-hsl) / 0.1);
+    --modal-dialog-shadow: 0 0 0 var(--size-100) var(--modal-dialog-color-shadow), var(--bs-card);
 
     position: fixed;
     top: 0;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     padding: var(--space-600); // 32
-    background-color: var(--modal-color-background);
+    background-color: var(--modal-backdrop-color-background);
     backface-visibility: hidden;
     visibility: hidden;
     opacity: 0;
@@ -54,26 +54,7 @@
 }
 
 .d-modal--transparent {
-  //  Component CSS Vars
-  //  ------------------------------------------------------------------------
-  --modal-color-background: hsla(var(--black-900-hsl) ~' / ' 85%);
-
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--zi-hide);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-600); // 32
-  background-color: var(--d-bgc-transparent);
-  backface-visibility: hidden;
-  visibility: hidden;
-  opacity: 0;
-  will-change: visibility, z-index, opacity;
+  --modal-backdrop-color-background: var(--d-bgc-transparent);
 }
 
 //  $$  MODAL DIALOG
@@ -167,7 +148,7 @@
 .d-modal__banner {
   --modal-banner-padding-y: var(--space-500);
   --modal-banner-padding-x: var(--space-600);
-  --modal-banner-color-background: var(--gold-100);
+  --modal-banner-color-background: var(--bgc-warning);
 
   position: relative;
   box-sizing: border-box;

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

@@ -15,23 +15,30 @@
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --notice-color-background: var(--black-100);
+    --notice-color-background: var(--bgc-secondary);
     --notice-color-text: var(--fc-primary);
-
-    display: flex;
-    align-items: center;
+    --notice-color-icon: var(--notice-color-text);
+    --notice-color-shadow: hsla(var(--black-900-hsl) / 0.06);
+    --notice-padding: var(--space-500);
+    --notice-font-size: var(--fs-200);
+    --notice-line-height: var(--lh-300);
+    --notice-border-radius: var(--size-400);
+    --notice-box-shadow: 0 0 0 var(--size-100) var(--notice-color-shadow) inset;
 
     //  Base Styles
     //  ------------------------------------------------------------------------
+    display: flex;
+    align-items: center;
     box-sizing: border-box;
     width: 100%;
     max-width: calc(var(--size-300) * 157); // 628
-    padding: calc(var(--space-300) * 3); // 12
+    padding: var(--notice-padding);
     color: var(--notice-color-text);
-    font-size: var(--fs-200);
-    line-height: var(--lh6);
+    font-size: var(--notice-font-size);
+    line-height: var(--notice-line-height);
     background-color: var(--notice-color-background);
-    border-radius: var(--br4);
+    border-radius: var(--notice-border-radius);
+    box-shadow: var(--notice-box-shadow);
 
     .d-toast & {
         max-width: calc(var(--size-300) * 116); // 464
@@ -49,7 +56,7 @@
     display: flex;
     flex: 1 auto;
     flex-direction: column;
-    margin-right: var(--space-500); // 16
+    margin-right: var(--space-500);
 }
 
 //  $$  ACTIONS
@@ -57,9 +64,8 @@
 .d-notice__actions {
     display: flex;
     flex: 0 auto;
+    gap: var(--space-400);
     align-items: center;
-
-    .d-flow8();
 }
 
 //  $$  ICON
@@ -67,8 +73,12 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-right: var(--space-400); // 8
-    color: inherit;
+    margin-right: calc(var(--space-300) * 3);
+    color: var(--notice-color-icon);
+
+    .d-banner & {
+        margin-right: var(--space-400);
+    }
 }
 
 //  ============================================================================
@@ -79,14 +89,22 @@
     font-size: inherit;
 }
 
+.d-notice__message {
+    .d-notice__title:not([hidden]) + & {
+        font-size: var(--fs-100);
+    }
+}
+
 //  ============================================================================
 //  $   STYLES
 //  ============================================================================
 //  $$  DEFAULT IMPORTANT
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--important {
-    --notice-color-background: var(--black-800);
+    --notice-color-background: var(--bgc-contrast);
     --notice-color-text: var(--black-100);
+    --notice-color-shadow: transparent;
+    --notice-color-icon: var(--fc-primary-inverted);
 }
 
 //  $$  ERROR
@@ -94,14 +112,14 @@
 .d-notice--error,
 .d-banner--error,
 .d-toast--error {
-    --notice-color-background: var(--red-100);
-    --notice-color-text: var(--red-500);
+    --notice-color-background: var(--bgc-critical);
+    --notice-color-icon: var(--red-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--red-300);
-        --notice-color-text: var(--white);
+        --notice-color-background: var(--red-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -110,13 +128,14 @@
 .d-notice--info,
 .d-banner--info,
 .d-toast--info {
-    --notice-color-background: var(--purple-100);
+    --notice-color-background: var(--bgc-info);
+    --notice-color-icon: var(--blue-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--purple-400);
-        --notice-color-text: var(--white);
+        --notice-color-background: var(--blue-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -125,14 +144,14 @@
 .d-notice--success,
 .d-banner--success,
 .d-toast--success {
-    --notice-color-background: var(--green-100);
-    --notice-color-text: var(--green-500);
+    --notice-color-background: var(--bgc-success);
+    --notice-color-icon: var(--green-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice-color-background: var(--green-200);
-        --notice-color-text: var(--green-500);
+        --notice-color-background: var(--green-400);
+        --notice-color-text: var(--fc-primary-inverted);
     }
 }
 
@@ -141,12 +160,14 @@
 .d-notice--warning,
 .d-banner--warning,
 .d-toast--warning {
-    --notice-color-background: var(--gold-100);
+    --notice-color-background: var(--bgc-warning);
+    --notice-color-icon: var(--gold-400);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
         --notice-color-background: var(--gold-200);
         --notice-color-text: var(--fc-primary);
+        --notice-color-icon: var(--notice-color-text);
     }
 }