@dialpad/dialtone 7.0.0-beta.5 → 7.0.0-beta.7

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

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

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

@@ -18,22 +18,15 @@
 //    - Sizes
 //  • INPUT ICONS
 //
-//  ============================================================================
-//  Inputs CSS Vars
-//  ----------------------------------------------------------------------------
-@inputs-icon-spacing--xs: calc(var(--su4) + @icon12 + var(--su8));
-@inputs-icon-spacing--sm: calc(var(--su4) + @icon14 + var(--su8));
-@inputs-icon-spacing:     calc(var(--su4) + @icon16 + var(--su8));
-@inputs-icon-spacing--lg: calc(var(--su4) + @icon20 + var(--su8));
-@inputs-icon-spacing--xl: calc(var(--su4) + @icon24 + var(--su8));
 
 //  $  INPUTS
 //  ----------------------------------------------------------------------------
 .d-input,
-.d-textarea {
+.d-textarea,
+.d-input__wrapper {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
+    --input--focus-bc: var(--primary-color);
     --input--bc: var(--black-600);
     --input--bgc: var(--white);
     --input--fc: var(--black-800);
@@ -59,14 +52,6 @@
     transition-duration: 100ms;
     transition-property: border, box-shadow, background-color;
 
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing;
-    }
-
     //  --  Placeholder copy
     &::placeholder {
         color: var(--fc-placeholder);
@@ -76,7 +61,8 @@
         display: none;
     }
     //  --  FOCUS
-    &:focus {
+    &:focus,
+    &:focus-within {
         --input--bc: var(--input--focus-bc);
 
         outline: 0;
@@ -89,7 +75,8 @@
         --input--bgc: var(--black-300);
         --input--fc: var(--fc-disabled);
 
-        &:focus {
+        &:focus,
+        &:focus-within {
             box-shadow: none !important;
         }
 
@@ -107,57 +94,54 @@
 //  $$  INPUT WRAPPER
 //  ----------------------------------------------------------------------------
 .d-input__wrapper {
-    position: relative;
+    padding: 0;
+
+    .d-input-icon.d-input-icon--right {
+        margin-right: var(--su8);
+    }
+
+    .d-input-icon.d-input-icon--left {
+        margin-left: var(--su8);
+    }
+
+    .d-input,
+    .d-textarea {
+        flex: 1;
+        border: none;
+        border-radius: var(--base--corner-radius);
+
+        &:focus {
+            border: none;
+            outline: 0;
+            box-shadow: none !important;
+        }
+
+        &.d-input-icon--right {
+            padding-right: var(--su6);
+        }
+
+        &.d-input-icon--left {
+            padding-left: var(--su6);
+        }
+    }
 }
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
 .d-input.d-input--xs {
     .input-button-xs();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xs;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-input.d-input--sm {
     .input-button-sm();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--sm;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-input.d-input--lg {
     .input-button-lg();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--lg;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-input.d-input--xl {
     .input-button-xl();
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xl;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xl;
-    }
 }
 
 
@@ -175,56 +159,24 @@
     .input-button-xs();
 
     min-height: 4rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xs;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-textarea--sm {
     .input-button-sm();
 
     min-height: 4.8rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--sm;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-textarea--lg {
     .input-button-lg();
 
     min-height: 9.2rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--lg;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-textarea--xl {
     .input-button-xl();
 
     min-height: 10rem;
-
-    &.d-input-icon--right {
-        padding-right: @inputs-icon-spacing--xl;
-    }
-
-    &.d-input-icon--left {
-        padding-left: @inputs-icon-spacing--xl;
-    }
 }
 
 //  $$  VALIDATION STATES
@@ -267,7 +219,6 @@
     //  ------------------------------------------------------------------------
     --input-icon-size: @icon16;
 
-    position: absolute;
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
@@ -279,24 +230,6 @@
         width: var(--input-icon-size);
         height: var(--input-icon-size);
     }
-
-    &.d-input-icon--left {
-        left: var(--su8);
-        // Update padding for d-input if d-input-icon--left is present
-        & ~ .d-input,
-        & ~ .d-textarea {
-            padding-left: @inputs-icon-spacing;
-        }
-    }
-
-    &.d-input-icon--right {
-        right: var(--su8);
-
-        // Update padding for d-input if d-input-icon--right is present
-        & ~ .d-input {
-            padding-right: @inputs-icon-spacing;
-        }
-    }
 }
 
 
@@ -309,19 +242,6 @@
 
 .d-input-icon--xs {
     --input-icon-size: @icon12;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--xs;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--xs;
-    }
 }
 
 .d-input-icon.d-input--sm {
@@ -330,19 +250,6 @@
 
 .d-input-icon--sm {
     --input-icon-size: @icon14;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--sm;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--sm;
-    }
 }
 
 .d-input-icon.d-input--lg {
@@ -351,19 +258,6 @@
 
 .d-input-icon--lg {
     --input-icon-size: @icon20;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--lg;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--lg;
-    }
 }
 
 .d-input-icon.d-input--xl {
@@ -372,17 +266,4 @@
 
 .d-input-icon--xl {
     --input-icon-size: @icon24;
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input, d-textarea if d-input-icon--left is present
-    &.d-input-icon--left ~ .d-input,
-    &.d-input-icon--left ~ .d-textarea {
-        padding-left: @inputs-icon-spacing--xl;
-    }
-
-    // For backwards compatibility purposes only.
-    // Update padding for d-input if d-input-icon--right is present
-    &.d-input-icon--right ~ .d-input {
-        padding-right: @inputs-icon-spacing--xl;
-    }
 }

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

@@ -21,7 +21,7 @@
     box-sizing: border-box;
     margin: var(--su0);
     padding: var(--su0);
-    color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
+    color: var(--primary-color);
     font: inherit;
     text-decoration: underline;
     background-color: transparent;
@@ -35,7 +35,7 @@
     fill: currentColor;
 
     &:hover {
-        color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
+        color: var(--primary-color-hover);
         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(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 85%);
+        background-color: hsla(var(--primary-color-hsl) ~' / ' 85%);
     }
 
     &-selected {
         color: var(--white);
-        background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
+        background-color: var(--primary-color);
 
         &:hover {
             color: var(--white);
-            background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
+            background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
         }
     }
 }

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

@@ -27,7 +27,7 @@
 .d-modal {
     //  Component CSS Vars
     //  ------------------------------------------------------------------------
-    --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 85%);
+    --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 60%);
     --modal-dialog--bgc: var(--white);
     --modal-dialog--fc: var(--black-700);
     --modal-header--fc: var(--black-800);
@@ -240,7 +240,7 @@
 //  $$  DANGER
 //  ----------------------------------------------------------------------------
 .d-modal--danger {
-  --modal-header--fc: var(--fc-error);
+  --modal-header--fc: var(--fc-dark);
 }
 
 

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

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

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

@@ -36,7 +36,7 @@
   font-weight: inherit;
   font-size: var(--fs-200);
   font-family: inherit;
-  line-height: var(--lh-tight);
+  line-height: var(--lh-200);
 
   //  --  Arrows
   &::before,
@@ -115,7 +115,7 @@
   --select--bc: var(--black-600);
 
   &:focus {
-    --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
+    --select--bc: var(--primary-color);
 
     box-shadow: var(--bs-focus-ring);
   }

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

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

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

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

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

@@ -45,7 +45,7 @@
     padding: var(--su8);
     color: var(--tooltip--fc);
     font-size: var(--fs-100);
-    line-height: var(--lh-normal);
+    line-height: var(--lh-300);
     text-align: center;
     background-color: var(--tooltip--bgc);
     border-radius: var(--br4);

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

@@ -51,6 +51,14 @@ 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,6 +34,12 @@
 
 
 @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);
@@ -44,7 +50,7 @@
     base--font-size:                                  var(--fs-200);
     base--font-family:                                @ff-custom;
     base--font-feature-settings:                      'calt' 0;
-    base--line-height:                                var(--lh-normal);
+    base--line-height:                                var(--lh-300);
     base--corner-radius:                              0.25em;
 
     theme-topbar-color:                               hsl(var(--theme-topbar-color-hsl));

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

@@ -25,8 +25,16 @@
 //  $$  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;
 
 //  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
@@ -35,6 +43,14 @@
 //      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);
@@ -43,10 +59,23 @@
 //  --  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/internals.less

@@ -476,4 +476,29 @@
     //  Iterate our loop until we hit our grid column total
     #d-internals #build-flex-columns(@num, @count + 1);
   }
+
+    //  ========================================================================
+    //  $   SPACING CLASSES
+    //  ------------------------------------------------------------------------
+    #spacing-classes(@BU, @prefix, @suffix: '') {
+      @stop-100: ~"@{prefix}-100@{suffix}";
+      @stop-200: ~"@{prefix}-200@{suffix}";
+      @stop-300: ~"@{prefix}-300@{suffix}";
+      @stop-400: ~"@{prefix}-400@{suffix}";
+      @stop-500: ~"@{prefix}-500@{suffix}";
+      @stop-600: ~"@{prefix}-600@{suffix}";
+      @stop-700: ~"@{prefix}-700@{suffix}";
+      @stop-800: ~"@{prefix}-800@{suffix}";
+
+      body {
+        --@{stop-100}:       calc(@BU / pow(2, 3));
+        --@{stop-200}:       calc(@BU / pow(2, 2));
+        --@{stop-300}:       calc(@BU / pow(2, 1));
+        --@{stop-400}:       @BU;
+        --@{stop-500}:       calc(@BU * pow(2, 1));
+        --@{stop-600}:       calc(@BU * pow(2, 2));
+        --@{stop-700}:       calc(@BU * pow(2, 3));
+        --@{stop-800}:       calc(@BU * pow(2, 4));
+      }
+    }
 }