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

package/lib/build/less/themes/default.less

@@ -39,14 +39,58 @@
     nav-background-color-l:                 var(--purple-800-l);
     nav-background-color:                   hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
 
-    topbar-height:                          var(--su64);
+    topbar-height:                                    var(--su64);
 
-    base--font-size:                        var(--fs16);
-    base--font-family:                      @ff-custom;
-    base--font-feature-settings:            'calt' 0;
-    base--line-height:                      var(--lh-normal);
-    base--corner-radius:                    0.25em;
+    base--font-size:                                  var(--fs-200);
+    base--font-family:                                @ff-custom;
+    base--font-feature-settings:                      'calt' 0;
+    base--line-height:                                var(--lh-normal);
+    base--corner-radius:                              0.25em;
+
+    theme-topbar-color:                               hsl(var(--theme-topbar-color-hsl));
+    theme-topbar-color-hsl:                           var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
+    theme-topbar-color-background:                    #f9f9f9; // DT7 TBD, possibly black-100?
+
+    theme-sidebar-color:                              hsl(var(--theme-sidebar-color-hsl));
+    theme-sidebar-color-hsl:                          var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
+    theme-sidebar-color-background:                   #f9f9f9; // DT7 TBD, possibly black-100?
+
+//  theme-sidebar-row-color-background:               {UNUSED}
+    theme-sidebar-row-color-background-hover:         var(--purple-100);
+    theme-sidebar-active-row-color:                   hsl(var(--theme-sidebar-active-row-color-hsl));
+    theme-sidebar-active-row-color-hsl:               var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
+    theme-sidebar-active-row-color-background:        #e9e9e9; // DT7 TBD, possibly black-100?
+
+    theme-presence-color-background-available:        var(--green-500);
+    theme-presence-color-background-busy-unavailable: var(--red-500);
+    theme-presence-color-background-busy:             var(--yellow-500);
+
+    theme-mention-color-background:                   var(--purple-500);
+}
+
+//  ============================================================================
+//  $   THEME CLASSES
+//  ============================================================================
+
+.d-theme-topbar-fc {
+    --fco: 75%;
+
+    color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
+
+    &:hover {
+        --fco: 100%;
+    }
 }
+.d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
+.d-theme-sidebar-fc { color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important; }
+.d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
+.d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
+.d-theme-sidebar-row-active-fc { color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important; }
+.d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
+.d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
+.d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
+.d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
+.d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
 
 
 //  ============================================================================
@@ -61,9 +105,6 @@ body {
 
     //  All the light colored HSL vars
     #d-internals #color-vars(white, @white);
-    #d-internals #color-vars(black-025, @black-025);
-    #d-internals #color-vars(black-050, @black-050);
-    #d-internals #color-vars(black-075, @black-075);
     #d-internals #color-vars(black-100, @black-100);
     #d-internals #color-vars(black-200, @black-200);
     #d-internals #color-vars(black-300, @black-300);
@@ -85,13 +126,11 @@ body {
     #d-internals #color-vars(orange-400, @orange-400);
     #d-internals #color-vars(orange-500, @orange-500);
     #d-internals #color-vars(orange-600, @orange-600);
-    #d-internals #color-vars(pink-100, @pink-100);
-    #d-internals #color-vars(pink-200, @pink-200);
-    #d-internals #color-vars(pink-300, @pink-300);
-    #d-internals #color-vars(pink-400, @pink-400);
-    #d-internals #color-vars(pink-500, @pink-500);
-    #d-internals #color-vars(pink-600, @pink-600);
-    #d-internals #color-vars(pink-700, @pink-700);
+    #d-internals #color-vars(magenta-100, @magenta-100);
+    #d-internals #color-vars(magenta-200, @magenta-200);
+    #d-internals #color-vars(magenta-300, @magenta-300);
+    #d-internals #color-vars(magenta-400, @magenta-400);
+    #d-internals #color-vars(magenta-500, @magenta-500);
     #d-internals #color-vars(yellow-050, @yellow-050);
     #d-internals #color-vars(yellow-100, @yellow-100);
     #d-internals #color-vars(yellow-200, @yellow-200);
@@ -104,31 +143,34 @@ body {
     #d-internals #color-vars(green-300, @green-300);
     #d-internals #color-vars(green-400, @green-400);
     #d-internals #color-vars(green-500, @green-500);
-    #d-internals #color-vars(green-600, @green-600);
-    #d-internals #color-vars(green-700, @green-700);
     #d-internals #color-vars(red-100, @red-100);
     #d-internals #color-vars(red-200, @red-200);
     #d-internals #color-vars(red-300, @red-300);
     #d-internals #color-vars(red-400, @red-400);
     #d-internals #color-vars(red-500, @red-500);
-    #d-internals #color-vars(red-600, @red-600);
-    #d-internals #color-vars(red-700, @red-700);
+    #d-internals #color-vars(blue-100, @blue-100);
+    #d-internals #color-vars(blue-200, @blue-200);
+    #d-internals #color-vars(blue-300, @blue-300);
+    #d-internals #color-vars(blue-400, @blue-400);
+    #d-internals #color-vars(blue-500, @blue-500);
+    #d-internals #color-vars(tan-100, @tan-100);
+    #d-internals #color-vars(tan-200, @tan-200);
+    #d-internals #color-vars(tan-300, @tan-300);
+    #d-internals #color-vars(tan-400, @tan-400);
+    #d-internals #color-vars(tan-500, @tan-500);
 
     //  All the dark colored HSL vars
     &.theme-dark {
         //  All the light colored HSL vars
         #d-internals #color-vars(white, @black-900);
-        #d-internals #color-vars(black-025, @black-800);
-        #d-internals #color-vars(black-050, @black-700);
-        #d-internals #color-vars(black-075, @black-600);
-        #d-internals #color-vars(black-100, @black-500);
-        #d-internals #color-vars(black-200, @black-400);
-        #d-internals #color-vars(black-300, @black-300);
-        #d-internals #color-vars(black-400, @black-200);
-        #d-internals #color-vars(black-500, @black-100);
-        #d-internals #color-vars(black-600, @black-075);
-        #d-internals #color-vars(black-700, @black-050);
-        #d-internals #color-vars(black-800, @black-025);
+        #d-internals #color-vars(black-100, @black-800);
+        #d-internals #color-vars(black-200, @black-700);
+        #d-internals #color-vars(black-300, @black-600);
+        #d-internals #color-vars(black-400, @black-500);
+        #d-internals #color-vars(black-500, @black-400);
+        #d-internals #color-vars(black-600, @black-300);
+        #d-internals #color-vars(black-700, @black-200);
+        #d-internals #color-vars(black-800, @black-100);
         #d-internals #color-vars(black-900, @white);
         #d-internals #color-vars(purple-100, @purple-600);
         #d-internals #color-vars(purple-200, @purple-500);
@@ -142,13 +184,11 @@ body {
         #d-internals #color-vars(orange-400, @orange-300);
         #d-internals #color-vars(orange-500, @orange-200);
         #d-internals #color-vars(orange-600, @orange-100);
-        #d-internals #color-vars(pink-100, @pink-700);
-        #d-internals #color-vars(pink-200, @pink-600);
-        #d-internals #color-vars(pink-300, @pink-500);
-        #d-internals #color-vars(pink-400, @pink-400);
-        #d-internals #color-vars(pink-500, @pink-300);
-        #d-internals #color-vars(pink-600, @pink-200);
-        #d-internals #color-vars(pink-700, @pink-100);
+        #d-internals #color-vars(magenta-100, @magenta-500);
+        #d-internals #color-vars(magenta-200, @magenta-400);
+        #d-internals #color-vars(magenta-300, @magenta-300);
+        #d-internals #color-vars(magenta-400, @magenta-200);
+        #d-internals #color-vars(magenta-500, @magenta-100);
         #d-internals #color-vars(yellow-050, @yellow-600);
         #d-internals #color-vars(yellow-100, @yellow-500);
         #d-internals #color-vars(yellow-200, @yellow-400);
@@ -156,20 +196,16 @@ body {
         #d-internals #color-vars(yellow-400, @yellow-200);
         #d-internals #color-vars(yellow-500, @yellow-100);
         #d-internals #color-vars(yellow-600, @yellow-050);
-        #d-internals #color-vars(green-100, @green-700);
-        #d-internals #color-vars(green-200, @green-600);
-        #d-internals #color-vars(green-300, @green-500);
-        #d-internals #color-vars(green-400, @green-400);
-        #d-internals #color-vars(green-500, @green-300);
-        #d-internals #color-vars(green-600, @green-200);
-        #d-internals #color-vars(green-700, @green-100);
-        #d-internals #color-vars(red-100, @red-700);
-        #d-internals #color-vars(red-200, @red-600);
-        #d-internals #color-vars(red-300, @red-500);
-        #d-internals #color-vars(red-400, @red-400);
-        #d-internals #color-vars(red-500, @red-300);
-        #d-internals #color-vars(red-600, @red-200);
-        #d-internals #color-vars(red-700, @red-100);
+        #d-internals #color-vars(green-100, @green-500);
+        #d-internals #color-vars(green-200, @green-400);
+        #d-internals #color-vars(green-300, @green-300);
+        #d-internals #color-vars(green-400, @green-200);
+        #d-internals #color-vars(green-500, @green-100);
+        #d-internals #color-vars(red-100, @red-500);
+        #d-internals #color-vars(red-200, @red-400);
+        #d-internals #color-vars(red-300, @red-300);
+        #d-internals #color-vars(red-400, @red-200);
+        #d-internals #color-vars(red-500, @red-100);
 
         //  Now all our color vars
         each(@dark-color-vars, {

package/lib/build/less/utilities/backgrounds.less

@@ -23,7 +23,7 @@
 #d-internals #gradient-stops(black);
 #d-internals #gradient-stops(orange);
 #d-internals #gradient-stops(purple);
-#d-internals #gradient-stops(pink);
+#d-internals #gradient-stops(magenta);
 #d-internals #gradient-stops(yellow);
 #d-internals #gradient-stops(red);
 #d-internals #gradient-stops(green);
@@ -33,13 +33,7 @@
 #d-internals #gradient-classes(black-900);
 #d-internals #gradient-classes(black-800);
 #d-internals #gradient-classes(black-700);
-#d-internals #gradient-classes(black-075);
-#d-internals #gradient-classes(black-050);
-#d-internals #gradient-classes(black-025);
-#d-internals #gradient-classes(pink-700);
 #d-internals #gradient-classes(yellow-050);
-#d-internals #gradient-classes(green-700);
-#d-internals #gradient-classes(red-700);
 
 
 //  ============================================================================

package/lib/build/less/utilities/colors.less

@@ -18,23 +18,19 @@
 #d-internals #standard-stops(black);
 #d-internals #standard-stops(purple);
 #d-internals #standard-stops(orange);
-#d-internals #standard-stops(pink);
+#d-internals #standard-stops(magenta);
 #d-internals #standard-stops(yellow);
 #d-internals #standard-stops(red);
 #d-internals #standard-stops(green);
+#d-internals #standard-stops(blue);
+#d-internals #standard-stops(tan);
 
 //  --  A few additional colors that the standard-stops mixin misses
 #d-internals #color-classes(white);
 #d-internals #color-classes(black-900);
 #d-internals #color-classes(black-800);
 #d-internals #color-classes(black-700);
-#d-internals #color-classes(black-075);
-#d-internals #color-classes(black-050);
-#d-internals #color-classes(black-025);
-#d-internals #color-classes(pink-700);
 #d-internals #color-classes(yellow-050);
-#d-internals #color-classes(green-700);
-#d-internals #color-classes(red-700);
 
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
@@ -56,11 +52,11 @@
 .d-fc-orange { &:extend(.d-fc-orange-600); }
 #d-internals #generate-hover-focus(d-fc-orange, {.d-fc-orange();});
 
-.d-fc-pink { &:extend(.d-fc-pink-600); }
-#d-internals #generate-hover-focus(d-fc-pink, {.d-fc-pink();});
+.d-fc-magenta { &:extend(.d-fc-magenta-400); }
+#d-internals #generate-hover-focus(d-fc-magenta, {.d-fc-magenta();});
 
 .d-fc-green,
-.d-fc-success { &:extend(.d-fc-green-600); }
+.d-fc-success { &:extend(.d-fc-green-400); }
 #d-internals #generate-hover-focus(d-fc-green, {.d-fc-green();});
 #d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
 
@@ -71,7 +67,7 @@
 
 .d-fc-red,
 .d-fc-error,
-.d-fc-danger { &:extend(.d-fc-red-600); }
+.d-fc-danger { &:extend(.d-fc-red-400); }
 #d-internals #generate-hover-focus(d-fc-red, {.d-fc-red();});
 #d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
 #d-internals #generate-hover-focus(d-fc-danger, {.d-fc-danger();});
@@ -83,16 +79,22 @@
 .d-fc-unset { color: unset !important; }
 #d-internals #generate-hover-focus(d-fc-unset, {.d-fc-unset();});
 
+.d-fc-blue { &:extend(.d-fc-blue-400); }
+#d-internals #generate-hover-focus(d-fc-blue, {.d-fc-blue();});
+
+.d-fc-tan { &:extend(.d-fc-tan-400); }
+#d-internals #generate-hover-focus(d-fc-tan, {.d-fc-tan();});
+
 
 //  $$  BACKGROUND COLORS
 //  ----------------------------------------------------------------------------
-.d-bgc-success { &:extend(.d-bgc-green-500); }
+.d-bgc-success { &:extend(.d-bgc-green-400); }
 #d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
 .d-bgc-warning { &:extend(.d-bgc-yellow-500); }
 #d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});
 
 .d-bgc-error,
-.d-bgc-danger { &:extend(.d-bgc-red-500); }
+.d-bgc-danger { &:extend(.d-bgc-red-300); }
 #d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
 #d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});
 
@@ -114,9 +116,11 @@
 
 //  $   OPACITY CLASSES
 //  ----------------------------------------------------------------------------
+#d-internals #opacity-classes(100);
 #d-internals #opacity-classes(99);
 #d-internals #opacity-classes(95);
 #d-internals #opacity-classes(90);
+#d-internals #opacity-classes(85);
 #d-internals #opacity-classes(75);
 #d-internals #opacity-classes(50);
 #d-internals #opacity-classes(25);

package/lib/build/less/utilities/internals.less

@@ -282,7 +282,7 @@
     //      `.theme-dark`.
     //
     //      USAGE:
-    //      #d-internals #dark-mode('.d-modal', { background-color: var(--black-200); })
+    //      #d-internals #dark-mode('.d-modal', { background-color: var(--black-400); })
     //
     //  ------------------------------------------------------------------------
     #dark-mode(@class, @rules) {
@@ -378,16 +378,17 @@
     //  ========================================================================
     //  $   CREATE FONT FACE
     //  ------------------------------------------------------------------------
-    #font-face(@type, @name, @style: normal) {
+    #font-face(@type, @name, @style: normal, @local: false, @ascent: normal) {
         #d-internal-config();
 
         if((@generate-font-face = true), each(@type, {
-            @font-face {
-                font-style: @style;
-                font-weight: @key;
-                font-family: @name;
-                src: url("@{define-font-path}@{value}.woff2") format("woff2");
-            };
+          @font-face {
+            font-style: @style;
+            font-weight: @key;
+            font-family: @name;
+            src: if((@local = true ), local(@value), url("@{define-font-path}@{value}.woff2") format("woff2"));
+            ascent-override: @ascent;
+          };
         }));
     }
 

package/lib/build/less/utilities/typography.less

@@ -32,13 +32,19 @@
 //  $   FONT FACE
 //      To turn on custom webfonts, set @define-font-face to true.
 //  ----------------------------------------------------------------------------
-#d-internals #font-face(@define-ff-custom, @define-ff-custom-name);
-#d-internals #font-face(@define-ff-custom-italic, @define-ff-custom-name, italic);
-#d-internals #font-face(@define-ff-mono, @define-ff-mono-name);
+#d-internals #font-face(@define-ff-custom-adjusted, @define-ff-custom-adjusted-name, normal, true, 95%);
+#d-internals #font-face(@define-ff-custom-adjusted-italic, @define-ff-custom-adjusted-name, italic, true, 95%);
+#d-internals #font-face(@define-ff-mono, @define-ff-mono-name, normal, true);
 #d-internals #font-face(@define-ff-marketing, @define-ff-marketing-name);
 #d-internals #font-face(@define-ff-marketing-semi-expanded, @define-ff-marketing-semi-expanded-name);
 #d-internals #font-face(@define-ff-marketing-expanded, @define-ff-marketing-expanded-name);
 
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Bold);
+    ascent-override: 90%;
+    font-weight: 700;
+}
 //  ============================================================================
 //  $   FONT FAMILY
 //  ----------------------------------------------------------------------------
@@ -69,29 +75,38 @@ ul {
 //  ============================================================================
 //  $   FONT SIZE
 //  ----------------------------------------------------------------------------
-.d-fs10 { font-size: var(--fs10) !important; }
-.d-fs11 { font-size: var(--fs11) !important; }
-.d-fs12 { font-size: var(--fs12) !important; }
-.d-fs14 { font-size: var(--fs14) !important; }
-.d-fs16 { font-size: var(--fs16) !important; }
-.d-fs18 { font-size: var(--fs18) !important; }
-.d-fs20 { font-size: var(--fs20) !important; }
-.d-fs24 { font-size: var(--fs24) !important; }
-.d-fs28 { font-size: var(--fs28) !important; }
-.d-fs32 { font-size: var(--fs32) !important; }
-.d-fs36 { font-size: var(--fs36) !important; }
-.d-fs42 { font-size: var(--fs42) !important; }
-.d-fs48 { font-size: var(--fs48) !important; }
-.d-fs54 { font-size: var(--fs54) !important; }
-
-.d-headline10 { .d-fs10(); font-weight: @headline-weight; .d-tt-uppercase(); }
-.d-headline24 { .d-fs24(); font-weight: @headline-weight !important; }
-.d-headline28 { .d-fs28(); font-weight: @headline-weight !important; }
-.d-headline32 { .d-fs32(); font-weight: @headline-weight !important; }
-.d-headline36 { .d-fs36(); font-weight: @headline-weight !important; }
-.d-headline42 { .d-fs42(); font-weight: @headline-weight !important; }
-.d-headline48 { .d-fs48(); font-weight: @headline-weight !important; }
-.d-headline54 { .d-fs54(); font-weight: @headline-weight !important; }
+.d-fs-100 { font-size: var(--fs-100) !important; }
+.d-fs-200 { font-size: var(--fs-200) !important; }
+.d-fs-300 { font-size: var(--fs-300) !important; }
+.d-fs-400 { font-size: var(--fs-400) !important; }
+.d-fs-500 { font-size: var(--fs-500) !important; }
+
+.d-fs-100-mobile { font-size: var(--fs-100-mobile) !important; }
+.d-fs-200-mobile { font-size: var(--fs-200-mobile) !important; }
+.d-fs-300-mobile { font-size: var(--fs-300-mobile) !important; }
+.d-fs-400-mobile { font-size: var(--fs-400-mobile) !important; }
+.d-fs-500-mobile { font-size: var(--fs-500-mobile) !important; }
+
+.d-fs-100-tc8 { font-size: var(--fs-100-tc8) !important; }
+.d-fs-200-tc8 { font-size: var(--fs-200-tc8) !important; }
+.d-fs-300-tc8 { font-size: var(--fs-300-tc8) !important; }
+.d-fs-400-tc8 { font-size: var(--fs-400-tc8) !important; }
+.d-fs-500-tc8 { font-size: var(--fs-500-tc8) !important; }
+
+.d-fs-100-tv { font-size: var(--fs-100-tv) !important; }
+.d-fs-200-tv { font-size: var(--fs-200-tv) !important; }
+.d-fs-300-tv { font-size: var(--fs-300-tv) !important; }
+.d-fs-400-tv { font-size: var(--fs-400-tv) !important; }
+.d-fs-500-tv { font-size: var(--fs-500-tv) !important; }
+
+.d-headline10 { .d-fs-100(); font-weight: @headline-weight; .d-tt-uppercase(); }
+.d-headline24 { .d-fs-300(); font-weight: @headline-weight !important; }
+.d-headline28 { .d-fs-400(); font-weight: @headline-weight !important; }
+.d-headline32 { .d-fs-400(); font-weight: @headline-weight !important; }
+.d-headline36 { .d-fs-400(); font-weight: @headline-weight !important; }
+.d-headline42 { .d-fs-500(); font-weight: @headline-weight !important; }
+.d-headline48 { .d-fs-500(); font-weight: @headline-weight !important; }
+.d-headline54 { .d-fs-500(); font-weight: @headline-weight !important; }
 
 .d-fs-unset { font-size: unset !important; }
 
@@ -107,13 +122,10 @@ ul {
 //  ============================================================================
 //  $$  FONT WEIGHT
 //  ----------------------------------------------------------------------------
-.d-fw-thin { font-weight: var(--fw-thin) !important; }
-.d-fw-light { font-weight: var(--fw-light) !important; }
 .d-fw-normal { font-weight: var(--fw-normal) !important; }
 .d-fw-medium { font-weight: var(--fw-medium) !important; }
 .d-fw-semibold { font-weight: var(--fw-semibold) !important; }
 .d-fw-bold { font-weight: var(--fw-bold) !important; }
-.d-fw-black { font-weight: var(--fw-black) !important; }
 .d-fw-unset { font-weight: unset !important; }
 
 

package/lib/build/less/variables/colors.less

@@ -14,18 +14,15 @@
 //  $   COLOR STOPS BASE HEX VALUES
 //  ----------------------------------------------------------------------------
 @white:                         #FFFFFF;
-@black-025:                     #F2F2F6;
-@black-050:                     #EAE9EF;
-@black-075:                     #DFDEE5;
-@black-100:                     #CDCDD8;
-@black-200:                     #B3B0C0;
-@black-300:                     #9C99AC;
-@black-400:                     #7B7789;
-@black-500:                     #575564;
-@black-600:                     #444150;
-@black-700:                     #322D37;
-@black-800:                     #221F24;
-@black-900:                     #0D0C0F;
+@black-100:                     #F9F9F9;
+@black-200:                     #E9E9E9;
+@black-300:                     #D2D2D2;
+@black-400:                     #AAAAAA;
+@black-500:                     #808080;
+@black-600:                     #555555;
+@black-700:                     #3A3A3A;
+@black-800:                     #222222;
+@black-900:                     #000000;
 
 @purple-100:                    #EEE5FF;
 @purple-200:                    #D3BCFF;
@@ -41,13 +38,11 @@
 @orange-500:                    #E05E00;
 @orange-600:                    #43220A;
 
-@pink-100:                      #FFEBEC;
-@pink-200:                      #FFD8DA;
-@pink-300:                      #FDA2A8;
-@pink-400:                      #FF578A;
-@pink-500:                      #E92A7A;
-@pink-600:                      #A2114D;
-@pink-700:                      #57102E;
+@magenta-100:                   #FF97D2;
+@magenta-200:                   #F756B1;
+@magenta-300:                   #F9008E;
+@magenta-400:                   #8C0E56;
+@magenta-500:                   #541A3B;
 
 @yellow-050:                    #FBF8F1;
 @yellow-100:                    #FFF9E3;
@@ -57,46 +52,55 @@
 @yellow-500:                    #FFBC0F;
 @yellow-600:                    #3F2D00;
 
-@green-100:                     #EBFFE2;
-@green-200:                     #D1FFBC;
-@green-300:                     #9CFF6D;
-@green-400:                     #6BEE04;
-@green-500:                     #0C9B02;
-@green-600:                     #0A5B03;
-@green-700:                     #052F01;
-
-@red-100:                       #FFF1F1;
-@red-200:                       #FFD3D3;
-@red-300:                       #FFA7A7;
-@red-400:                       #FA4646;
-@red-500:                       #D81616;
-@red-600:                       #930000;
-@red-700:                       #480000;
+@green-100:                     #DDF4D9;
+@green-200:                     #9FFF90;
+@green-300:                     #45F777;
+@green-400:                     #1AA340;
+@green-500:                     #124620;
+
+@red-100:                       #FFDCDC;
+@red-200:                       #FF7474;
+@red-300:                       #FF2E2E;
+@red-400:                       #A41111;
+@red-500:                       #540000;
+
+@blue-100:                      #E3EDF9;
+@blue-200:                      #84BDFF;
+@blue-300:                      #51A0FE;
+@blue-400:                      #1768C6;
+@blue-500:                      #01326D;
+
+@tan-100:                       #F2F0EE;
+@tan-200:                       #CEC8C4;
+@tan-300:                       #87807B;
+@tan-400:                       #3F3D3C;
+@tan-500:                       #121212;
+
 
 //  ============================================================================
 //  $   COLOR STATES
 //      Used for inputs, notices, and button statuses
 //  ----------------------------------------------------------------------------
 @color-states: {
-    error-color:                var(--red-500);
-    error-color-hsl:            var(--red-500-hsl);
-    error-color-hover:          var(--red-600);
+    error-color:                var(--red-300);
+    error-color-hsl:            var(--red-300-hsl);
+    error-color-hover:          var(--red-400);
 
     warning-color:              var(--yellow-500);
     warning-color-hsl:          var(--yellow-500-hsl);
     warning-color-hover:        var(--yellow-600);
 
-    success-color:              var(--green-500);
-    success-color-hsl:          var(--green-500-hsl);
-    success-color-hover:        var(--green-600);
+    success-color:              var(--green-400);
+    success-color-hsl:          var(--green-400-hsl);
+    success-color-hover:        var(--green-400);
 
     muted-color:                var(--black-800);
     muted-color-hsl:            var(--black-800-hsl);
     muted-color-hover:          var(--black-800);
 
-    inverted-color:             var(--black-025);
-    inverted-color-hsl:         var(--black-025-hsl);
-    inverted-color-hover:       var(--black-075);
+    inverted-color:             var(--black-100);
+    inverted-color-hsl:         var(--black-100-hsl);
+    inverted-color-hover:       var(--black-300);
 }
 
 //  ============================================================================
@@ -124,13 +128,13 @@
     fc-lighter:                 var(--black-600);
     fc-purple:                  var(--purple-400);
     fc-orange:                  var(--orange-600);
-    fc-pink:                    var(--pink-600);
-    fc-green:                   var(--green-600);
+    fc-magenta:                 var(--magenta-400);
+    fc-green:                   var(--green-400);
     fc-yellow:                  var(--yellow-600);
-    fc-red:                     var(--red-600);
-    fc-success:                 var(--green-600);
-    fc-error:                   var(--red-600);
-    fc-danger:                  var(--red-600);
+    fc-red:                     var(--red-400);
+    fc-success:                 var(--green-400);
+    fc-error:                   var(--red-400);
+    fc-danger:                  var(--red-400);
     fc-warning:                 hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 20%) ~' / ' var(--alpha, 100%));
     fc-warning-hover:           hsla(var(--yellow-500-h) var(--yellow-500-s) calc(var(--yellow-500-l) - 30%) ~' / ' var(--alpha, 100%));
     fc-muted:                   var(--black-900);
@@ -143,5 +147,5 @@
 //  $$  DARK HSL BREAKDOWNS
 //  ----------------------------------------------------------------------------
 @dark-color-vars: {
-    base--background-color:     var(--black-050);
+    base--background-color:     var(--black-200);
 }

package/lib/build/less/variables/sizes.less

@@ -10,7 +10,7 @@
 //  ============================================================================
 @input-button-vars: {
     input-button__padding:                  0.7rem var(--su8);
-    input-button__text-size:                var(--fs16);
+    input-button__text-size:                var(--fs-200);
     input-button__line-height:              var(--lh4);
     input-button__icon-size:                @icon-size18;
 }
@@ -24,7 +24,7 @@
 .input-button-xs() {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
-    font-size: var(--fs12);
+    font-size: var(--fs-100);
 
     .d-btn__icon {
         width: @icon-size14;
@@ -38,7 +38,7 @@
 .input-button-sm() {
     padding-top: var(--su6);
     padding-bottom: var(--su6);
-    font-size: var(--fs14);
+    font-size: var(--fs-200);
 
     .d-btn__icon {
         width: @icon-size16;
@@ -52,7 +52,7 @@
 .input-button-lg() {
     padding-top: 1.1rem;
     padding-bottom: 1.1rem;
-    font-size: var(--fs20);
+    font-size: var(--fs-300);
 
     .d-btn__icon {
         width: @icon-size20;
@@ -66,7 +66,7 @@
 .input-button-xl() {
     padding-top: 1.3rem;
     padding-bottom: 1.3rem;
-    font-size: var(--fs24);
+    font-size: var(--fs-300);
 
     .d-btn__icon {
         width: @icon-size24;