feat(style): DLT-2976 update underline thickness and offset (#1058)

Author: francisrupert

packages/dialtone-css/lib/build/less/components/link.less

@@ -31,18 +31,16 @@
     color: var(--link-color-default);
     font: inherit;
     text-decoration: var(--link-text-decoration);
-    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
-    text-decoration-thickness: var(--dt-size-border-50);
+    text-underline-offset: var(--dt-size-200);
+    text-decoration-thickness: var(--dt-size-border-100);
     background-color: var(--link-background-color);
     border: 0;
     transition-timing-function: var(--ttf-out-quint);
     transition-duration: var(--td200);
     transition-property: background-color, border, box-shadow;
 
     //  Reset button appearance
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
+    appearance: none;
     fill: currentColor;
 
     &:hover {
@@ -188,8 +186,8 @@
             --link-text-decoration: underline;
             --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.25);
 
-            text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
-            text-decoration-thickness: var(--dt-size-border-50);
+            text-underline-offset: var(--dt-size-200);
+            text-decoration-thickness: var(--dt-size-border-100);
         }
 
         &:active {

packages/dialtone-css/lib/build/less/dialtone-reset.less

@@ -80,14 +80,14 @@ pre {
 
 a {
   background-color: transparent;
-  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
-  text-decoration-thickness: var(--dt-size-border-50);
+  text-underline-offset: var(--dt-size-200);
+  text-decoration-thickness: var(--dt-size-border-100);
 }
 
 ins,
 u {
-  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
-  text-decoration-thickness: var(--dt-size-border-50);
+  text-underline-offset: var(--dt-size-200);
+  text-decoration-thickness: var(--dt-size-border-100);
 }
 
 /**
@@ -99,7 +99,7 @@ abbr[title] {
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
   border-block-end: none; /* 1 */
-  text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
+  text-underline-offset: var(--dt-size-200);
   text-decoration-thickness: var(--dt-size-border-100);
 }
 

packages/dialtone-css/lib/build/less/utilities/typography.less

@@ -357,13 +357,13 @@ ul {
 
 .d-td-underline {
     text-decoration: underline !important;
-    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
-    text-decoration-thickness: var(--dt-size-border-50) !important;
+    text-underline-offset: var(--dt-size-200) !important;
+    text-decoration-thickness: var(--dt-size-border-100) !important;
 }
 
 .d-td-dotted {
     text-decoration: underline dotted !important;
-    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100)) !important;
+    text-underline-offset: var(--dt-size-200) !important;
     text-decoration-thickness: var(--dt-size-border-100) !important;
 }