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

package/lib/build/less/components/button.less

@@ -20,7 +20,7 @@
 .d-btn {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --button--fc: var(--primary-color);
+    --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --button--bgc: transparent;
     --button--bc: transparent;
     --button--br: var(--base--corner-radius);
@@ -52,15 +52,15 @@
     //  --  STATES
     //  ------------------------------------------------------------------------
     &:hover {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 3%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
-        --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 9%);
     }
 
 
@@ -276,25 +276,25 @@
 //  $$  OUTLINED BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--outlined {
-    --button--bc: var(--primary-color);
+    --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 }
 
 //  $$  PRIMARY BUTTON
 //  ----------------------------------------------------------------------------
 .d-btn--primary {
     --button--fc: var(--white);
-    --button--bgc: var(--primary-color);
+    --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     &:hover {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
     }
 
     &:active,
     &.d-btn--active,
     &.d-btn--active:active {
       --button--fc: var(--white);
-      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
+      --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
     }
 }
 
@@ -397,18 +397,18 @@
 
     //  --  PRIMARY
     &.d-btn--primary {
-        --button--fc: var(--primary-color);
+        --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
         --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
         }
 
         &:active,
         &.d-btn--active,
         &.d-btn--active:active {
-            --button--fc: var(--primary-color-hover);
+            --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
             --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }

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

@@ -33,7 +33,7 @@
 .d-textarea {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input--focus-bc: var(--primary-color);
+    --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --input--bc: var(--black-500);
     --input--bgc: var(--white);
     --input--fc: var(--black-800);

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

@@ -21,7 +21,7 @@
     box-sizing: border-box;
     margin: var(--su0);
     padding: var(--su0);
-    color: var(--primary-color);
+    color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     font: inherit;
     text-decoration: underline;
     background-color: transparent;
@@ -35,7 +35,7 @@
     fill: currentColor;
 
     &:hover {
-        color: var(--primary-color-hover);
+        color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
         text-decoration: none;
         cursor: pointer;
     }

package/lib/build/less/components/list-group.less

@@ -33,16 +33,16 @@
 
     &:hover {
         color: var(--black-900);
-        background-color: hsla(var(--primary-color-hsl) ~' / ' 85%);
+        background-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 85%);
     }
 
     &-selected {
         color: var(--white);
-        background-color: var(--primary-color);
+        background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
         &:hover {
             color: var(--white);
-            background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
+            background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
         }
     }
 }

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

@@ -96,8 +96,6 @@
   visibility: hidden;
   opacity: 0;
   will-change: visibility, z-index, opacity, transform;
-
-  .d-stack16();
 }
 
 //  $$   MAKE THEM APPEAR
@@ -150,7 +148,7 @@
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: var(--su12) 0 0 !important;
+  margin: var(--su12) 0;
   padding: var(--su4) var(--su24);
 }
 
@@ -171,6 +169,7 @@
 //  ----------------------------------------------------------------------------
 .d-modal__banner {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   max-width: var(--size628);
   padding: var(--su12) var(--su24);

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

@@ -25,7 +25,7 @@
 .d-radio {
     //  Component specific CSS Vars
     //  ------------------------------------------------------------------------
-    --check-radio--color: var(--primary-color);
+    --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     --check-radio--bc: var(--black-500);
     --check-radio--bgc: var(--white);
 

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

@@ -115,7 +115,7 @@
   --select--bc: var(--black-500);
 
   &:focus {
-    --select--bc: var(--primary-color);
+    --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     box-shadow: var(--bs-focus-ring);
   }

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

@@ -103,18 +103,18 @@
 //  $   SELECTED STYLE
 //  ----------------------------------------------------------------------------
 .d-tab--selected {
-    --tab--fc: var(--primary-color);
+    --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
     z-index: var(--zi-selected);
 
     &:hover {
-        --tab--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
-        --tab--fc: var(--primary-color-hover);
+        --tab--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 10%);
+        --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
     }
 
     &::after,
     &:hover::after {
-        --tab--bgc: var(--primary-color);
+        --tab--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
     }
 }
 

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

@@ -74,7 +74,7 @@
 //  $$  CHECKED TOGGLE
 //  ----------------------------------------------------------------------------
 .d-toggle--checked {
-  --toggle-bc: var(--primary-color);
+  --toggle-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
 
   .d-toggle__inner {
     left: var(--su6);

package/lib/build/less/dialtone-globals.less

@@ -51,14 +51,6 @@ body {
     }
 }
 
-.d-svg-primary--stroke {
-    stroke: var(--primary-color);
-}
-
-.d-svg-primary--fill {
-    fill: var(--primary-color);
-}
-
 //  ============================================================================
 //  @   FOCUS VISIBLE
 //  ----------------------------------------------------------------------------

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

@@ -34,15 +34,9 @@
 
 
 @theme-vars: {
-    primary-color-h:                        var(--purple-400-h);
-    primary-color-s:                        var(--purple-400-s);
-    primary-color-l:                        var(--purple-400-l);
-    primary-color-hsl:                      var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
-    primary-color:                          hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
-    primary-color-hover:                    hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
-    nav-background-color-h:                 var(--purple-600-h);
-    nav-background-color-s:                 var(--purple-600-s);
-    nav-background-color-l:                 var(--purple-600-l);
+    nav-background-color-h:                 var(--purple-800-h);
+    nav-background-color-s:                 var(--purple-800-s);
+    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);

package/lib/build/less/themes/example.less

@@ -25,16 +25,8 @@
 //  $$  SET THESE
 //      Currently only the following items are themeable in Dialtone.
 //
-//      @primary-color:         This is used for all selected and primary states
-//                              in elements and components (i.e. buttons, input focus,
-//                              links, etc).
-//
-//      @primary-color--hover:  Hover state color for @primary-color.
-//
 //      @nav__background-color: This sets the navigation background color.
 //  ----------------------------------------------------------------------------
-@primary-color:                 @purple-400;
-@primary-color--hover:          darken(@primary-color, 10%);
 @nav__background-color:         @black-400;
 
 //  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
@@ -43,14 +35,6 @@
 //      Warning:    We use these to extract the HSL values of the HEX code and
 //                  restate them in the CSS Variables.
 //  ----------------------------------------------------------------------------
-@primary-color--h:              hue(@primary-color);
-@primary-color--s:              saturation(@primary-color);
-@primary-color--l:              lightness(@primary-color);
-
-@primary-color--hover--h:       hue(@primary-color--hover);
-@primary-color--hover--s:       saturation(@primary-color--hover);
-@primary-color--hover--l:       lightness(@primary-color--hover);
-
 @nav__background-color--h:      hue(@nav__background-color);
 @nav__background-color--s:      saturation(@nav__background-color);
 @nav__background-color--l:      lightness(@nav__background-color);
@@ -59,23 +43,10 @@
 //  --  RE-DECLARE CSS VARIABLES WITH NEW COLORS
 //  ----------------------------------------------------------------------------
 @theme-vars: {
-    primary-color:              @primary-color;
-    primary-color--h:           @primary-color--h;
-    primary-color--s:           @primary-color--s;
-    primary-color--l:           @primary-color--l;
-
-    primary-color--hover:       @primary-color--hover;
-    primary-color--hover--h:    @primary-color--hover--h;
-    primary-color--hover--s:    @primary-color--hover--s;
-    primary-color--hover--l:    @primary-color--l;
-
     nav__background-color:      @nav__background-color;
     nav__background-color--h:   @nav__background-color--h;
     nav__background-color--s:   @nav__background-color--s;
     nav__background-color--l:   @nav__background-color--l;
-
-    btn--inverted__bg--hover:   fade(mix(#fff, @primary-color, 90%), 25%);
-    btn--inverted--primary__bg--hover: mix(#fff, @primary-color, 90%);
 }
 
 //  ============================================================================

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

@@ -36,11 +36,6 @@
 #d-internals #color-classes(green-700);
 #d-internals #color-classes(red-700);
 
-.d-fc-primary {
-    color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l)  ~' / ' var(--fco)) !important;
-}
-#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});
-
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
 .d-fc-dark { &:extend(.d-fc-black-900); }
@@ -70,7 +65,7 @@
 #d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});
 
 .d-fc-yellow { &:extend(.d-fc-yellow-600); }
-.d-fc-warning { color: var(--fc-warning) }
+.d-fc-warning { color: var(--fc-warning); }
 #d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
 #d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});
 

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

@@ -104,7 +104,7 @@
 //      Used on inputs, buttons, and other focusable elements.
 //  ----------------------------------------------------------------------------
 @focus-rings: {
-    focus-ring:                 hsla(var(--primary-color-hsl) ~' / ' 75%);
+    focus-ring:                 hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 75%);
     focus-ring-success:         hsla(var(--success-color-hsl) ~' / ' 75%);
     focus-ring-warning:         hsla(var(--warning-color-hsl) ~' / ' 75%);
     focus-ring-error:           hsla(var(--error-color-hsl) ~' / ' 75%);
@@ -134,7 +134,6 @@
     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);
-    fc-primary:                 var(--primary-color);
 
     //  --  BASE TEMPLATE
     base--text-color:           var(--black-900);