@dialpad/dialtone 7.0.0-beta.3 → 7.0.0-beta.4

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

@@ -15,7 +15,7 @@
 .d-notice {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --notice--bgc: var(--black-025);
+    --notice--bgc: var(--black-100);
     --notice--fc: var(--fc-dark);
 
     display: flex;
@@ -28,7 +28,7 @@
     max-width: var(--size628);
     padding: var(--su12);
     color: var(--notice--fc);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh6);
     background-color: var(--notice--bgc);
     border-radius: var(--br4);
@@ -86,7 +86,7 @@
 //  ----------------------------------------------------------------------------
 .d-notice.d-notice--important {
     --notice--bgc: var(--black-800);
-    --notice--fc: var(--black-025);
+    --notice--fc: var(--black-100);
 }
 
 //  $$  ERROR
@@ -95,12 +95,12 @@
 .d-banner--error,
 .d-toast--error {
     --notice--bgc: var(--red-100);
-    --notice--fc: var(--red-700);
+    --notice--fc: var(--red-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--red-500);
+        --notice--bgc: var(--red-300);
         --notice--fc: var(--white);
     }
 }
@@ -126,13 +126,13 @@
 .d-banner--success,
 .d-toast--success {
     --notice--bgc: var(--green-100);
-    --notice--fc: var(--green-700);
+    --notice--fc: var(--green-500);
 
     &.d-notice--important,
     &.d-banner--important,
     &.d-toast--important {
-        --notice--bgc: var(--green-300);
-        --notice--fc: var(--green-700);
+        --notice--bgc: var(--green-200);
+        --notice--fc: var(--green-500);
     }
 }
 

package/lib/build/less/components/popover.less

@@ -31,7 +31,7 @@
   grid-template-rows: auto 1fr;
   overflow: auto;
   background-color: var(--white);
-  border-color: var(--black-100);
+  border-color: var(--black-400);
   border-radius: var(--su8);
   box-shadow: var(--bs-card);
 }
@@ -59,17 +59,17 @@
   padding-bottom: var(--su6);
   overflow: auto;
   font-weight: var(--fw-bold);
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
 }
 
 .d-popover__header {
   .d-popover__header-footer-base();
 
-  border-bottom: var(--su1) solid var(--black-075);
+  border-bottom: var(--su1) solid var(--black-300);
 }
 
 .d-popover__footer {
   .d-popover__header-footer-base();
 
-  border-top: var(--su1) solid var(--black-075);
+  border-top: var(--su1) solid var(--black-300);
 }

package/lib/build/less/components/radio-checkbox.less

@@ -26,7 +26,7 @@
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
     --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
-    --check-radio--bc: var(--black-500);
+    --check-radio--bc: var(--black-600);
     --check-radio--bgc: var(--white);
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
@@ -71,9 +71,9 @@
     //  --  DISABLED
     &[disabled],
     &--disabled {
-        --check-radio--color: var(--black-200);
-        --check-radio--bc: var(--black-200);
-        --check-radio--bgc: var(--black-075);
+        --check-radio--color: var(--black-400);
+        --check-radio--bc: var(--black-400);
+        --check-radio--bgc: var(--black-300);
 
         cursor: not-allowed;
     }
@@ -95,7 +95,7 @@
     &.d-radio-group--disabled {
         .d-checkbox__label,
         .d-radio__label {
-            color: var(--black-200);
+            color: var(--black-400);
             cursor: not-allowed;
         }
     }
@@ -132,7 +132,7 @@
     flex-direction: column;
     color: var(--black-800);
     font-weight: var(--fw-normal);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: calc(20/14);
     cursor: pointer;
 }
@@ -160,14 +160,14 @@
 
             //  Disabled
             &[disabled] {
-                --check-radio--bgc: var(--black-075);
+                --check-radio--bgc: var(--black-300);
 
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc: var(--black-075);
+            --check-radio--bgc: var(--black-300);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
@@ -179,7 +179,7 @@
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
 
             &[disabled] {
-                --check-radio--bgc: var(--black-075);
+                --check-radio--bgc: var(--black-300);
 
                 background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
             }
@@ -187,7 +187,7 @@
 
         &--indeterminate&--disabled,
         &:indeterminate&--disabled {
-            --check-radio--bgc: var(--black-075);
+            --check-radio--bgc: var(--black-300);
 
             background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='hsl(240, 10%, 51%)'/%3E%3C/svg%3E");
         }
@@ -195,9 +195,9 @@
         //  Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--black-200);
-            --check-radio--bc: var(--black-200);
-            --check-radio--bgc: var(--black-075);
+            --check-radio--color: var(--black-400);
+            --check-radio--bc: var(--black-400);
+            --check-radio--bgc: var(--black-300);
         }
     }
 }
@@ -245,9 +245,9 @@
         // Disabled
         &[disabled],
         &--disabled {
-            --check-radio--color: var(--black-200);
-            --check-radio--bc: var(--black-200);
-            --check-radio--bgc: var(--black-075);
+            --check-radio--color: var(--black-400);
+            --check-radio--bc: var(--black-400);
+            --check-radio--bgc: var(--black-300);
         }
 
         &:focus-visible,
@@ -262,12 +262,12 @@
 
             // Disabled
             &[disabled] {
-                --check-radio--bgc: var(--black-200);
+                --check-radio--bgc: var(--black-400);
             }
         }
 
         &--disabled:checked {
-            --check-radio--bgc: var(--black-200);
+            --check-radio--bgc: var(--black-400);
         }
     }
 }

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

@@ -23,7 +23,7 @@
 .d-select {
   //  Component CSS Vars
   //  --------------------------------------------------------------------------
-  --select--bc: var(--black-400);
+  --select--bc: var(--black-500);
   --select--bgc: var(--white);
   --select--fc: var(--black-800);
   --select--bs: var(--focus-ring);
@@ -34,7 +34,7 @@
   width: 100%; // important to fill the available space
   width: -webkit-fill-available; // important to fill the available space
   font-weight: inherit;
-  font-size: var(--fs18);
+  font-size: var(--fs-200);
   font-family: inherit;
   line-height: var(--lh-tight);
 
@@ -65,7 +65,7 @@
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-select--xs {
-  font-size: var(--fs14);
+  font-size: var(--fs-200);
 
   .d-select__input {
     .input-button-xs();
@@ -73,7 +73,7 @@
 }
 
 .d-select--sm {
-  font-size: var(--fs16);
+  font-size: var(--fs-200);
 
   .d-select__input {
     .input-button-sm();
@@ -81,7 +81,7 @@
 }
 
 .d-select--lg {
-  font-size: var(--fs20);
+  font-size: var(--fs-300);
 
   .d-select__input {
     .input-button-lg();
@@ -89,7 +89,7 @@
 }
 
 .d-select--xl {
-  font-size: var(--fs24);
+  font-size: var(--fs-300);
 
   .d-select__input {
     .input-button-xl();
@@ -112,7 +112,7 @@
   //  [2] Update the styles
   .d-input();
 
-  --select--bc: var(--black-500);
+  --select--bc: var(--black-600);
 
   &:focus {
     --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
@@ -121,9 +121,9 @@
   }
 
   &:disabled {
-    color: var(--black-400);
-    background: var(--black-075);
-    border: 1px solid var(--black-200);
+    color: var(--black-500);
+    background: var(--black-300);
+    border: 1px solid var(--black-400);
   }
 
   &::-moz-focus-inner {
@@ -175,6 +175,6 @@
 .d-select--disabled {
   &::before,
   &::after {
-    border-color: var(--black-400) transparent;
+    border-color: var(--black-500) transparent;
   }
 }

package/lib/build/less/components/skeleton.less

@@ -13,9 +13,9 @@
 .skeleton-placeholder {
   display: flex;
   width: 100%;
-  background: var(--placeholder-from-color, @black-075);
+  background: var(--placeholder-from-color, @black-300);
   animation-duration: 1000ms;
-  fill: var(--placeholder-from-color, @black-075);
+  fill: var(--placeholder-from-color, @black-300);
   stroke: none;
 
   &--animate {
@@ -27,17 +27,17 @@
 // the animation is used by the skeleton component
 @keyframes placeholder-throb {
   10% {
-    background: var(--placeholder-from-color, @black-075);
-    fill: var(--placeholder-from-color, @black-075);
+    background: var(--placeholder-from-color, @black-300);
+    fill: var(--placeholder-from-color, @black-300);
   }
 
   50% {
-    background: var(--placeholder-to-color, @black-050);
-    fill: var(--placeholder-to-color, @black-050);
+    background: var(--placeholder-to-color, @black-200);
+    fill: var(--placeholder-to-color, @black-200);
   }
 
   90% {
-    background: var(--placeholder-from-color, @black-075);
-    fill: var(--placeholder-from-color, @black-075);
+    background: var(--placeholder-from-color, @black-300);
+    fill: var(--placeholder-from-color, @black-300);
   }
 }

package/lib/build/less/components/table.less

@@ -19,14 +19,14 @@
     //  ------------------------------------------------------------------------
     --table--th: var(--black-700);
     --table--td: var(--black-600);
-    --table--bc: var(--black-200);
+    --table--bc: var(--black-400);
 
     display: table;
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
     margin: var(--su0);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh2);
     border-collapse: collapse;
     border-spacing: 0;
@@ -36,7 +36,7 @@
       margin-bottom: var(--su8);
       color: var(--table--th);
       font-weight: var(--fw-bold);
-      font-size: var(--fs18);
+      font-size: var(--fs-200);
       .d-ta-unset();
     }
 
@@ -46,7 +46,7 @@
 
         // Column Header Styles
         th {
-            font-size: var(--fs12);
+            font-size: var(--fs-100);
             text-transform: uppercase;
         }
     }
@@ -93,9 +93,9 @@
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------
 .d-table--inverted {
-    --table--th: var(--black-050);
-    --table--td: var(--black-100);
-    --table--bc: var(--black-050);
+    --table--th: var(--black-200);
+    --table--td: var(--black-400);
+    --table--bc: var(--black-200);
 }
 
 //  ============================================================================
@@ -104,13 +104,13 @@
 .d-table--striped {
     // Row Styles
     tr:nth-child(even) {
-        background-color: hsl(var(--black-400-h), var(--black-400-s), var(--black-400-l), 0.1);
+        background-color: hsl(var(--black-500-h), var(--black-500-s), var(--black-500-l), 0.1);
     }
 
     &.d-table--inverted {
         // Row Styles
         tr:nth-child(even) {
-            background-color: hsl(var(--black-050-h), var(--black-050-s), var(--black-050-l), 0.1);
+            background-color: hsl(var(--black-200-h), var(--black-200-s), var(--black-200-l), 0.1);
         }
     }
 }

package/lib/build/less/components/tabs.less

@@ -18,7 +18,7 @@
     display: flex;
     flex-wrap: wrap;
     color: var(--fc-light);
-    font-size: var(--fs16);
+    font-size: var(--fs-200);
 
     // Add a bottom border unless no border is requested
     &:not(.d-tablist--no-border)::after {
@@ -28,7 +28,7 @@
         left: 0;
         z-index: var(--zi-base1);
         height: var(--su1);
-        background-color: var(--black-200);
+        background-color: var(--black-400);
         content: '';
     }
 }
@@ -88,7 +88,7 @@
     }
 
     &:hover {
-        --tab--bgc: var(--black-025);
+        --tab--bgc: var(--black-100);
         --tab--fc: var(--fc-dark);
     }
 
@@ -152,7 +152,7 @@
 //  $   SIZES
 //  ----------------------------------------------------------------------------
 .d-tablist--sm {
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
 
     .d-tab {
         padding: var(--su12);

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

@@ -27,7 +27,7 @@
 .d-toast {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --toast--bgc: var(--black-025);
+    --toast--bgc: var(--black-100);
     --toast--fc: var(--fc-dark);
 
     z-index: var(--zi-notification);
@@ -37,7 +37,7 @@
     margin-bottom: var(--su8);
     padding: var(--su12);
     color: var(--toast--fc);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
     line-height: var(--lh6);
     word-break: normal;
     background-color: var(--toast--bgc);
@@ -85,17 +85,17 @@
 //  ----------------------------------------------------------------------------
 .d-toast.d-toast--important {
     --toast--bgc: var(--black-800);
-    --toast--fc: var(--black-025);
+    --toast--fc: var(--black-100);
 }
 
 //  $$  ERROR
 //  ----------------------------------------------------------------------------
 .d-toast--error {
     --toast--bgc: var(--red-100);
-    --toast--fc: var(--red-700);
+    --toast--fc: var(--red-500);
 
     &.d-toast--important {
-        --toast--bgc: var(--red-500);
+        --toast--bgc: var(--red-300);
         --toast--fc: var(--white);
     }
 }
@@ -116,11 +116,11 @@
 //  ----------------------------------------------------------------------------
 .d-toast--success {
     --toast--bgc: var(--green-100);
-    --toast--fc: var(--green-700);
+    --toast--fc: var(--green-500);
 
     &.d-toast--important {
-        --toast--bgc: var(--green-300);
-        --toast--fc: var(--green-700);
+        --toast--bgc: var(--green-200);
+        --toast--fc: var(--green-500);
     }
 }
 
@@ -147,13 +147,13 @@
   }
 
   .d-toast__meta {
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
   }
 
   &.d-toast--important {
     .d-notice__icon,
  .d-toast__meta {
-      color: var(--black-025);
+      color: var(--black-100);
     }
   }
 }
@@ -172,10 +172,10 @@
 
 .d-toast--organizer,
 .d-toast--viewing {
-  border-top: var(--su4) solid var(--pink-500);
+  border-top: var(--su4) solid var(--magenta-300);
 
   .d-notice__icon {
-    color: var(--pink-500);
+    color: var(--magenta-300);
   }
 }
 

package/lib/build/less/components/toggle.less

@@ -22,7 +22,7 @@
   //  ------------------------------------------------------------------------
   --toggle--ta: var(--ttf-in-out);
   --toggle-ts: var(--td200);
-  --toggle-bc: var(--black-200);
+  --toggle-bc: var(--black-400);
 
   position: relative;
   display: inline-block;

package/lib/build/less/components/tooltip.less

@@ -44,7 +44,7 @@
     max-width: var(--size216);
     padding: var(--su8);
     color: var(--tooltip--fc);
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
     line-height: var(--lh-normal);
     text-align: center;
     background-color: var(--tooltip--bgc);
@@ -63,7 +63,7 @@
 .d-tooltip--inverted {
     //  --  COMPONENT CSS VARS
     //  -----------------------
-    --tooltip--bgc: var(--black-050);
+    --tooltip--bgc: var(--black-200);
     --tooltip--fc: var(--black-700);
 }
 

package/lib/build/less/dialtone.less

@@ -16,6 +16,7 @@
 @import 'components/banner';
 @import 'components/breadcrumbs';
 @import 'components/button';
+@import 'components/card';
 @import 'components/chip';
 @import 'components/forms';
 @import 'components/input';