@dialpad/dialtone 7.25.1 → 7.26.0

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

@@ -9,6 +9,7 @@
 //  ============================================================================
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
+
 #d-internal__input-and-select-xs() {
     --input-padding-y: calc(calc(var(--space-400) - var(--space-100)) - var(--input-border-width));
     --input-padding-x: calc(var(--space-400) - var(--input-border-width));
@@ -16,8 +17,8 @@
     --input-border-radius: var(--size-300);
 
     .d-btn__icon {
-        width: @icon-size14;
-        height: @icon-size14;
+        width: @icon14;
+        height: @icon14;
     }
 }
 
@@ -29,8 +30,8 @@
     --input-font-size: var(--fs-100);
 
     .d-btn__icon {
-        width: @icon-size16;
-        height: @icon-size16;
+        width: @icon16;
+        height: @icon16;
     }
 }
 
@@ -40,11 +41,11 @@
     --input-padding-y: calc((var(--space-400) + var(--space-200)) - var(--input-border-width));
     --input-padding-x: calc(var(--space-500) - var(--input-border-width));
     --input-font-size: var(--fs-300);
-    --input-border-radius: calc(var(--size-300) * 3);
+    --input-border-radius: var(--size-450);
 
     .d-btn__icon {
-        width: @icon-size20;
-        height: @icon-size20;
+        width: @icon20;
+        height: @icon20;
     }
 }
 
@@ -57,8 +58,8 @@
     --input-border-radius: var(--size-500);
 
     .d-btn__icon {
-        width: @icon-size24;
-        height: @icon-size24;
+        width: @icon24;
+        height: @icon24;
     }
 }
 

package/lib/build/less/variables/spacing.less

@@ -9,6 +9,9 @@
 //  ============================================================================
 //  $   SPACING UNITS
 //  ----------------------------------------------------------------------------
+//  This will ultimately be replaced by Design Tokens, so it's currently quite
+//  redundant. Due to how the `#internals` LESS mixins work, the value of these
+//  can't be a `var(--size-###)`, so ¯\_(ツ)_/¯
 @su0:                           0;          // 0
 @su1:                           0.1rem;     // 1px
 @su2:                           0.2rem;     // 2px

package/lib/build/less/variables/typography.less

@@ -2,6 +2,7 @@
 //
 //  DIALTONE
 //  TOKENS: TYPOGRAPHY
+//  Pretty much everything in this file will ultimately be replaced by Design Tokens
 //
 //  These are typography constants for Dialpad's design system Dialtone.
 //  For further documentation of these and other classes,
@@ -77,18 +78,18 @@
 //  ============================================================================
 //  $   FONT WEIGHTS
 //  ----------------------------------------------------------------------------
+// This will ultimately be replaced by Design Tokens
 @fw-normal:                     400;
 @fw-medium:                     500;
 @fw-semibold:                   600;
 @fw-bold:                       700;
 
-
-
 //  ============================================================================
 //  $   FONT SIZES
 //  ============================================================================
 //  $$  HEADLINES
 //  ----------------------------------------------------------------------------
+// This will ultimately be replaced by Design Tokens
 @fs-100:            1.2rem;
 @fs-200:            1.5rem;
 @fs-300:            1.9rem;
@@ -116,6 +117,7 @@
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
+//  Currently unclear how these will be replaced by Design Tokens
 @lh0:               1;
 @lh1:               calc(1em + 1px);
 @lh2:               calc(1em + 2px);

package/lib/build/less/variables/visual-styles.less

@@ -2,6 +2,8 @@
 //  DIALTONE
 //  TOKENS: VISUAL STYLES
 //
+//  Pretty much everything in this file will ultimately be replaced by Design Tokens
+//
 //  These are various visual style tokens and mixins for Dialpad's design
 //  system Dialtone. For further documentation of these values, please visit:
 //  https://dialpad.design/tokens/visual-styles
@@ -26,7 +28,7 @@
 
 @bs-sm:    0 var(--size-200) var(--size-300) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 15%);
 @bs-md:    0 var(--size-200) var(--size-400) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 25%);
-@bs-lg:    0 var(--size-200) calc(var(--size-300) * 3) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
+@bs-lg:    0 var(--size-200) var(--size-450) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
 @bs-xl:    0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 30%);
 
 @bs-card:  0 var(--size-200) var(--size-500) 0 hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) ~' / ' 8%),
@@ -52,6 +54,7 @@
 //  ============================================================================
 //  $   BACKGROUND PATTERNS
 //  ----------------------------------------------------------------------------
+//  TODO: sunset these?
 @background-patterns: {
     bgg-pattern-blob-dark:                 @bgg-pattern-blob-dark;
     bgg-pattern-chevrons-dark:             @bgg-pattern-chevrons-dark;