npm - @dialpad/dialtone - Versions diffs - 9.73.0-beta.1 → 9.73.0 - Mend

@dialpad/dialtone 9.73.0-beta.1 → 9.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (657) hide show

package/dist/tokens/less/tokens-expressive-sm-dark.less CHANGED Viewed

@@ -1,12 +1,12 @@
 // Do not edit directly, this file was auto-generated.
-@dt-font-size-100: 1.2rem; // small
-@dt-font-size-200: 1.6rem; // medium / base
-@dt-font-size-300: 2rem; // large
-@dt-font-size-400: 2.8rem; // extra large / xl
-@dt-font-size-500: 4.1rem; // extra large / xxl
-@dt-font-size-600: 5.1rem;
+@dt-font-size-100: 12px; // small
+@dt-font-size-200: 16px; // medium / base
+@dt-font-size-300: 20px; // large
+@dt-font-size-400: 28px; // extra large / xl
+@dt-font-size-500: 41px; // extra large / xxl
+@dt-font-size-600: 51px;
 @dt-size-border-focus: 0.3rem;
 @dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
 @dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
@@ -124,177 +124,177 @@
 @dt-typography-body-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium text style for main content.
 @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
 @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
-@dt-typography-body-md-font-size: 1.6rem; // Base default medium text style for main content.
+@dt-typography-body-md-font-size: 16px; // Base default medium text style for main content.
 @dt-typography-body-md-text-case: none; // Base default medium text style for main content.
 @dt-typography-body-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium body style.
 @dt-typography-body-md-compact-font-weight: 400; // A tighter-spaced version of medium body style.
 @dt-typography-body-md-compact-line-height: 1.4; // A tighter-spaced version of medium body style.
-@dt-typography-body-md-compact-font-size: 1.6rem; // A tighter-spaced version of medium body style.
+@dt-typography-body-md-compact-font-size: 16px; // A tighter-spaced version of medium body style.
 @dt-typography-body-md-compact-text-case: none; // A tighter-spaced version of medium body style.
 @dt-typography-body-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Reduced small text style for less prominent or adjacent content.
 @dt-typography-body-sm-font-weight: 400; // Reduced small text style for less prominent or adjacent content.
 @dt-typography-body-sm-line-height: 1.4; // Reduced small text style for less prominent or adjacent content.
-@dt-typography-body-sm-font-size: 1.2rem; // Reduced small text style for less prominent or adjacent content.
+@dt-typography-body-sm-font-size: 12px; // Reduced small text style for less prominent or adjacent content.
 @dt-typography-body-sm-text-case: none; // Reduced small text style for less prominent or adjacent content.
 @dt-typography-body-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small body style.
 @dt-typography-body-sm-compact-font-weight: 400; // A tighter-spaced version of small body style.
 @dt-typography-body-sm-compact-line-height: 1.2; // A tighter-spaced version of small body style.
-@dt-typography-body-sm-compact-font-size: 1.2rem; // A tighter-spaced version of small body style.
+@dt-typography-body-sm-compact-font-size: 12px; // A tighter-spaced version of small body style.
 @dt-typography-body-sm-compact-text-case: none; // A tighter-spaced version of small body style.
 @dt-typography-headline-eyebrow-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
 @dt-typography-headline-eyebrow-font-weight: 400; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
 @dt-typography-headline-eyebrow-line-height: 1.4; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
-@dt-typography-headline-eyebrow-font-size: 1.2rem; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
+@dt-typography-headline-eyebrow-font-size: 12px; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
 @dt-typography-headline-eyebrow-text-case: uppercase; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
 @dt-typography-headline-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for secondary information or subheadings.
 @dt-typography-headline-sm-font-weight: 700; // Smaller text size for secondary information or subheadings.
 @dt-typography-headline-sm-line-height: 1.4; // Smaller text size for secondary information or subheadings.
-@dt-typography-headline-sm-font-size: 1.6rem; // Smaller text size for secondary information or subheadings.
+@dt-typography-headline-sm-font-size: 16px; // Smaller text size for secondary information or subheadings.
 @dt-typography-headline-sm-text-case: none; // Smaller text size for secondary information or subheadings.
 @dt-typography-headline-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small headline style.
 @dt-typography-headline-sm-compact-font-weight: 700; // A tighter-spaced version of small headline style.
 @dt-typography-headline-sm-compact-line-height: 1.2; // A tighter-spaced version of small headline style.
-@dt-typography-headline-sm-compact-font-size: 1.6rem; // A tighter-spaced version of small headline style.
+@dt-typography-headline-sm-compact-font-size: 16px; // A tighter-spaced version of small headline style.
 @dt-typography-headline-sm-compact-text-case: none; // A tighter-spaced version of small headline style.
 @dt-typography-headline-sm-soft-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of small headline style.
 @dt-typography-headline-sm-soft-font-weight: 500; // A softer font weight version of small headline style.
 @dt-typography-headline-sm-soft-line-height: 1.4; // A softer font weight version of small headline style.
-@dt-typography-headline-sm-soft-font-size: 1.6rem; // A softer font weight version of small headline style.
+@dt-typography-headline-sm-soft-font-size: 16px; // A softer font weight version of small headline style.
 @dt-typography-headline-sm-soft-text-case: none; // A softer font weight version of small headline style.
 @dt-typography-headline-sm-soft-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter-spaced version of small headline style.
 @dt-typography-headline-sm-soft-compact-font-weight: 500; // A softer font weight, tighter-spaced version of small headline style.
 @dt-typography-headline-sm-soft-compact-line-height: 1.2; // A softer font weight, tighter-spaced version of small headline style.
-@dt-typography-headline-sm-soft-compact-font-size: 1.6rem; // A softer font weight, tighter-spaced version of small headline style.
+@dt-typography-headline-sm-soft-compact-font-size: 16px; // A softer font weight, tighter-spaced version of small headline style.
 @dt-typography-headline-sm-soft-compact-text-case: none; // A softer font weight, tighter-spaced version of small headline style.
 @dt-typography-headline-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Medium-sized base text style for headlines.
 @dt-typography-headline-md-font-weight: 700; // Medium-sized base text style for headlines.
 @dt-typography-headline-md-line-height: 1.6; // Medium-sized base text style for headlines.
-@dt-typography-headline-md-font-size: 2rem; // Medium-sized base text style for headlines.
+@dt-typography-headline-md-font-size: 20px; // Medium-sized base text style for headlines.
 @dt-typography-headline-md-text-case: none; // Medium-sized base text style for headlines.
 @dt-typography-headline-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium headline style.
 @dt-typography-headline-md-compact-font-weight: 700; // A tighter-spaced version of medium headline style.
 @dt-typography-headline-md-compact-line-height: 1.4; // A tighter-spaced version of medium headline style.
-@dt-typography-headline-md-compact-font-size: 2rem; // A tighter-spaced version of medium headline style.
+@dt-typography-headline-md-compact-font-size: 20px; // A tighter-spaced version of medium headline style.
 @dt-typography-headline-md-compact-text-case: none; // A tighter-spaced version of medium headline style.
 @dt-typography-headline-lg-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Large text style for headlines to attract attention.
 @dt-typography-headline-lg-font-weight: 700; // Large text style for headlines to attract attention.
 @dt-typography-headline-lg-line-height: 1.6; // Large text style for headlines to attract attention.
-@dt-typography-headline-lg-font-size: 2.8rem; // Large text style for headlines to attract attention.
+@dt-typography-headline-lg-font-size: 28px; // Large text style for headlines to attract attention.
 @dt-typography-headline-lg-text-case: none; // Large text style for headlines to attract attention.
 @dt-typography-headline-lg-soft-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of large headline style.
 @dt-typography-headline-lg-soft-font-weight: 500; // A softer font weight version of large headline style.
 @dt-typography-headline-lg-soft-line-height: 1.6; // A softer font weight version of large headline style.
-@dt-typography-headline-lg-soft-font-size: 2.8rem; // A softer font weight version of large headline style.
+@dt-typography-headline-lg-soft-font-size: 28px; // A softer font weight version of large headline style.
 @dt-typography-headline-lg-soft-text-case: none; // A softer font weight version of large headline style.
 @dt-typography-headline-lg-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of large body style.
 @dt-typography-headline-lg-compact-font-weight: 700; // A tighter-spaced version of large body style.
 @dt-typography-headline-lg-compact-line-height: 1.4; // A tighter-spaced version of large body style.
-@dt-typography-headline-lg-compact-font-size: 2.8rem; // A tighter-spaced version of large body style.
+@dt-typography-headline-lg-compact-font-size: 28px; // A tighter-spaced version of large body style.
 @dt-typography-headline-lg-compact-text-case: none; // A tighter-spaced version of large body style.
 @dt-typography-headline-lg-soft-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter spaced version of large headline style.
 @dt-typography-headline-lg-soft-compact-font-weight: 500; // A softer font weight, tighter spaced version of large headline style.
 @dt-typography-headline-lg-soft-compact-line-height: 1.4; // A softer font weight, tighter spaced version of large headline style.
-@dt-typography-headline-lg-soft-compact-font-size: 2.8rem; // A softer font weight, tighter spaced version of large headline style.
+@dt-typography-headline-lg-soft-compact-font-size: 28px; // A softer font weight, tighter spaced version of large headline style.
 @dt-typography-headline-lg-soft-compact-text-case: none; // A softer font weight, tighter spaced version of large headline style.
 @dt-typography-headline-xl-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Extra large text style for high importance headlines.
 @dt-typography-headline-xl-font-weight: 500; // Extra large text style for high importance headlines.
 @dt-typography-headline-xl-line-height: 1.2; // Extra large text style for high importance headlines.
-@dt-typography-headline-xl-font-size: 4.1rem; // Extra large text style for high importance headlines.
+@dt-typography-headline-xl-font-size: 41px; // Extra large text style for high importance headlines.
 @dt-typography-headline-xl-text-case: none; // Extra large text style for high importance headlines.
 @dt-typography-headline-xl-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra large headline style.
 @dt-typography-headline-xl-compact-font-weight: 500; // A tighter-spaced version of extra large headline style.
 @dt-typography-headline-xl-compact-line-height: 1; // A tighter-spaced version of extra large headline style.
-@dt-typography-headline-xl-compact-font-size: 4.1rem; // A tighter-spaced version of extra large headline style.
+@dt-typography-headline-xl-compact-font-size: 41px; // A tighter-spaced version of extra large headline style.
 @dt-typography-headline-xl-compact-text-case: none; // A tighter-spaced version of extra large headline style.
 @dt-typography-headline-xxl-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Largest text style for extra extra large content.
 @dt-typography-headline-xxl-font-weight: 500; // Largest text style for extra extra large content.
 @dt-typography-headline-xxl-line-height: 1.2; // Largest text style for extra extra large content.
-@dt-typography-headline-xxl-font-size: 5.1rem; // Largest text style for extra extra large content.
+@dt-typography-headline-xxl-font-size: 51px; // Largest text style for extra extra large content.
 @dt-typography-headline-xxl-text-case: none; // Largest text style for extra extra large content.
 @dt-typography-headline-xxl-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra extra large headline style.
 @dt-typography-headline-xxl-compact-font-weight: 500; // A tighter-spaced version of extra extra large headline style.
 @dt-typography-headline-xxl-compact-line-height: 1; // A tighter-spaced version of extra extra large headline style.
-@dt-typography-headline-xxl-compact-font-size: 5.1rem; // A tighter-spaced version of extra extra large headline style.
+@dt-typography-headline-xxl-compact-font-size: 51px; // A tighter-spaced version of extra extra large headline style.
 @dt-typography-headline-xxl-compact-text-case: none; // A tighter-spaced version of extra extra large headline style.
 @dt-typography-label-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for labels, providing clear identification and categorization.
 @dt-typography-label-md-font-weight: 600; // Base default medium-sized text style for labels, providing clear identification and categorization.
 @dt-typography-label-md-line-height: 1.6; // Base default medium-sized text style for labels, providing clear identification and categorization.
-@dt-typography-label-md-font-size: 1.6rem; // Base default medium-sized text style for labels, providing clear identification and categorization.
+@dt-typography-label-md-font-size: 16px; // Base default medium-sized text style for labels, providing clear identification and categorization.
 @dt-typography-label-md-text-case: none; // Base default medium-sized text style for labels, providing clear identification and categorization.
 @dt-typography-label-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium label style.
 @dt-typography-label-md-compact-font-weight: 600; // A tighter-spaced version of medium label style.
 @dt-typography-label-md-compact-line-height: 1.4; // A tighter-spaced version of medium label style.
-@dt-typography-label-md-compact-font-size: 1.6rem; // A tighter-spaced version of medium label style.
+@dt-typography-label-md-compact-font-size: 16px; // A tighter-spaced version of medium label style.
 @dt-typography-label-md-compact-text-case: none; // A tighter-spaced version of medium label style.
 @dt-typography-label-md-plain-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of medium label style.
 @dt-typography-label-md-plain-font-weight: 400; // A non-bold version of medium label style.
 @dt-typography-label-md-plain-line-height: 1.6; // A non-bold version of medium label style.
-@dt-typography-label-md-plain-font-size: 1.6rem; // A non-bold version of medium label style.
+@dt-typography-label-md-plain-font-size: 16px; // A non-bold version of medium label style.
 @dt-typography-label-md-plain-text-case: none; // A non-bold version of medium label style.
 @dt-typography-label-md-plain-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of medium label style.
 @dt-typography-label-md-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of medium label style.
 @dt-typography-label-md-plain-compact-line-height: 1.4; // A non-bolded, tighter-spaced version of medium label style.
-@dt-typography-label-md-plain-compact-font-size: 1.6rem; // A non-bolded, tighter-spaced version of medium label style.
+@dt-typography-label-md-plain-compact-font-size: 16px; // A non-bolded, tighter-spaced version of medium label style.
 @dt-typography-label-md-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of medium label style.
 @dt-typography-label-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
 @dt-typography-label-sm-font-weight: 600; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
 @dt-typography-label-sm-line-height: 1.4; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
-@dt-typography-label-sm-font-size: 1.2rem; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
+@dt-typography-label-sm-font-size: 12px; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
 @dt-typography-label-sm-text-case: none; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
 @dt-typography-label-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small label style.
 @dt-typography-label-sm-compact-font-weight: 600; // A tighter-spaced version of small label style.
 @dt-typography-label-sm-compact-line-height: 1.2; // A tighter-spaced version of small label style.
-@dt-typography-label-sm-compact-font-size: 1.2rem; // A tighter-spaced version of small label style.
+@dt-typography-label-sm-compact-font-size: 12px; // A tighter-spaced version of small label style.
 @dt-typography-label-sm-compact-text-case: none; // A tighter-spaced version of small label style.
 @dt-typography-label-sm-plain-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of small label style.
 @dt-typography-label-sm-plain-font-weight: 400; // A non-bold version of small label style.
 @dt-typography-label-sm-plain-line-height: 1.4; // A non-bold version of small label style.
-@dt-typography-label-sm-plain-font-size: 1.2rem; // A non-bold version of small label style.
+@dt-typography-label-sm-plain-font-size: 12px; // A non-bold version of small label style.
 @dt-typography-label-sm-plain-text-case: none; // A non-bold version of small label style.
 @dt-typography-label-sm-plain-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of small label style.
 @dt-typography-label-sm-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of small label style.
 @dt-typography-label-sm-plain-compact-line-height: 1.2; // A non-bolded, tighter-spaced version of small label style.
-@dt-typography-label-sm-plain-compact-font-size: 1.2rem; // A non-bolded, tighter-spaced version of small label style.
+@dt-typography-label-sm-plain-compact-font-size: 12px; // A non-bolded, tighter-spaced version of small label style.
 @dt-typography-label-sm-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of small label style.
 @dt-typography-helper-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for supplementary contextual information.
 @dt-typography-helper-md-font-weight: 400; // Base default medium-sized text style for supplementary contextual information.
 @dt-typography-helper-md-line-height: 1.4; // Base default medium-sized text style for supplementary contextual information.
-@dt-typography-helper-md-font-size: 1.6rem; // Base default medium-sized text style for supplementary contextual information.
+@dt-typography-helper-md-font-size: 16px; // Base default medium-sized text style for supplementary contextual information.
 @dt-typography-helper-md-text-case: none; // Base default medium-sized text style for supplementary contextual information.
 @dt-typography-helper-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
 @dt-typography-helper-sm-font-weight: 400; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
 @dt-typography-helper-sm-line-height: 1.2; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
-@dt-typography-helper-sm-font-size: 1.2rem; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
+@dt-typography-helper-sm-font-size: 12px; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
 @dt-typography-helper-sm-text-case: none; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
 @dt-typography-code-md-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; // Base default medium-sized text style for monospace code snippets of technical content.
 @dt-typography-code-md-font-weight: 400; // Base default medium-sized text style for monospace code snippets of technical content.
 @dt-typography-code-md-line-height: 1.2; // Base default medium-sized text style for monospace code snippets of technical content.
-@dt-typography-code-md-font-size: 1.6rem; // Base default medium-sized text style for monospace code snippets of technical content.
+@dt-typography-code-md-font-size: 16px; // Base default medium-sized text style for monospace code snippets of technical content.
 @dt-typography-code-md-text-case: none; // Base default medium-sized text style for monospace code snippets of technical content.
 @dt-typography-code-sm-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
 @dt-typography-code-sm-font-weight: 400; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
 @dt-typography-code-sm-line-height: 1.2; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
-@dt-typography-code-sm-font-size: 1.2rem; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
+@dt-typography-code-sm-font-size: 12px; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
 @dt-typography-code-sm-text-case: none; // Smaller text size for monospace code, suitable for inline references or less prominent code examples.
 @dt-typography-inputs-xs-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Text style for extra small inputs (e.g. input and textarea)
 @dt-typography-inputs-xs-font-weight: 400; // Text style for extra small inputs (e.g. input and textarea)
-@dt-typography-inputs-xs-font-size: 1.2rem; // Text style for extra small inputs (e.g. input and textarea)
+@dt-typography-inputs-xs-font-size: 12px; // Text style for extra small inputs (e.g. input and textarea)
 @dt-typography-inputs-xs-line-height: 1.2; // Text style for extra small inputs (e.g. input and textarea)
 @dt-typography-inputs-sm-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Text style for small inputs (e.g. input and textarea)
 @dt-typography-inputs-sm-font-weight: 400; // Text style for small inputs (e.g. input and textarea)
-@dt-typography-inputs-sm-font-size: 1.2rem; // Text style for small inputs (e.g. input and textarea)
+@dt-typography-inputs-sm-font-size: 12px; // Text style for small inputs (e.g. input and textarea)
 @dt-typography-inputs-sm-line-height: 1.2; // Text style for small inputs (e.g. input and textarea)
 @dt-typography-inputs-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Text style for medium inputs (e.g. input and textarea)
 @dt-typography-inputs-md-font-weight: 400; // Text style for medium inputs (e.g. input and textarea)
-@dt-typography-inputs-md-font-size: 1.6rem; // Text style for medium inputs (e.g. input and textarea)
+@dt-typography-inputs-md-font-size: 16px; // Text style for medium inputs (e.g. input and textarea)
 @dt-typography-inputs-md-line-height: 1.2; // Text style for medium inputs (e.g. input and textarea)
 @dt-typography-inputs-lg-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Text style for large inputs (e.g. input and textarea)
 @dt-typography-inputs-lg-font-weight: 400; // Text style for large inputs (e.g. input and textarea)
-@dt-typography-inputs-lg-font-size: 2rem; // Text style for large inputs (e.g. input and textarea)
+@dt-typography-inputs-lg-font-size: 20px; // Text style for large inputs (e.g. input and textarea)
 @dt-typography-inputs-lg-line-height: 1.2; // Text style for large inputs (e.g. input and textarea)
 @dt-typography-inputs-xl-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Text style for extra large inputs (e.g. input and textarea)
 @dt-typography-inputs-xl-font-weight: 400; // Text style for extra large inputs (e.g. input and textarea)
-@dt-typography-inputs-xl-font-size: 1.2rem; // Text style for extra large inputs (e.g. input and textarea)
+@dt-typography-inputs-xl-font-size: 12px; // Text style for extra large inputs (e.g. input and textarea)
 @dt-typography-inputs-xl-line-height: 1.2; // Text style for extra large inputs (e.g. input and textarea)
 @dt-inputs-size-border-default: 0.15rem;
 @dt-inputs-size-border-status: 0.2rem;
@@ -308,11 +308,11 @@
 @dt-inputs-line-height-md: 1.2; // Line height for medium inputs (e.g. input and textarea)
 @dt-inputs-line-height-lg: 1.2; // Line height for large inputs (e.g. input and textarea)
 @dt-inputs-line-height-xl: 1.2; // Line height for extra large inputs (e.g. input and textarea)
-@dt-inputs-font-size-xs: 1.2rem; // Font size for extra small inputs (e.g. input and textarea)
-@dt-inputs-font-size-sm: 1.2rem; // Font size for small inputs (e.g. input and textarea)
-@dt-inputs-font-size-md: 1.6rem; // Font size for medium inputs (e.g. input and textarea)
-@dt-inputs-font-size-lg: 2rem; // Font size for large inputs (e.g. input and textarea)
-@dt-inputs-font-size-xl: 1.2rem;
+@dt-inputs-font-size-xs: 12px; // Font size for extra small inputs (e.g. input and textarea)
+@dt-inputs-font-size-sm: 12px; // Font size for small inputs (e.g. input and textarea)
+@dt-inputs-font-size-md: 16px; // Font size for medium inputs (e.g. input and textarea)
+@dt-inputs-font-size-lg: 20px; // Font size for large inputs (e.g. input and textarea)
+@dt-inputs-font-size-xl: 12px;
 @dt-inputs-font-weight-xs: 400; // Font weight for extra small inputs (e.g. input and textarea)
 @dt-inputs-font-weight-sm: 400; // Font weight for small inputs (e.g. input and textarea)
 @dt-inputs-font-weight-md: 400; // Font weight for medium inputs (e.g. input and textarea)
@@ -463,14 +463,14 @@
 @dt-checkbox-color-border-unchecked: #808080;
 @dt-checkbox-color-border-checked: #7C52FF;
 @dt-checkbox-color-background-checked: #7C52FF;
-@dt-icon-size-100: 1.2rem;
-@dt-icon-size-200: 1.4rem;
-@dt-icon-size-300: 1.8rem;
-@dt-icon-size-400: 2rem;
-@dt-icon-size-500: 2.4rem;
-@dt-icon-size-600: 3.2rem;
-@dt-icon-size-700: 3.8rem;
-@dt-icon-size-800: 4.8rem;
+@dt-icon-size-100: 12px;
+@dt-icon-size-200: 14px;
+@dt-icon-size-300: 18px;
+@dt-icon-size-400: 20px;
+@dt-icon-size-500: 24px;
+@dt-icon-size-600: 32px;
+@dt-icon-size-700: 38px;
+@dt-icon-size-800: 48px;
 @dt-icon-size-border-100: 0.1rem;
 @dt-icon-size-border-200: 0.125rem;
 @dt-icon-size-border-300: 0.15rem;