@dialpad/dialtone-css 8.74.0-next.2 → 8.74.0-next.3

package/lib/dist/tokens/tokens-buttercream-light.css

@@ -84,16 +84,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.59 0.24 288 / 0.5);
@@ -153,12 +153,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -582,10 +582,10 @@
   --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
@@ -651,8 +651,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.23 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: oklch(0.47 0.15 147);
@@ -681,10 +681,10 @@
   --dt-inputs-color-foreground-disabled: var(--dt-color-foreground-disabled);
   --dt-inputs-color-foreground-placeholder: var(--dt-color-foreground-placeholder);
   --dt-inputs-color-foreground-default: var(--dt-color-foreground-secondary);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-ceruleo-dark.css

@@ -81,16 +81,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.65 0.2 290 / 0.6);
@@ -150,12 +150,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -579,10 +579,10 @@
   --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-foreground-bulletin-subtle: oklch(0.92 0 0);
@@ -640,8 +640,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
@@ -673,10 +673,10 @@
   --dt-inputs-color-foreground-disabled: var(--dt-color-foreground-disabled);
   --dt-inputs-color-foreground-placeholder: var(--dt-color-foreground-placeholder);
   --dt-inputs-color-foreground-default: var(--dt-color-foreground-primary);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-ceruleo-light.css

@@ -81,16 +81,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.59 0.24 288 / 0.5);
@@ -148,12 +148,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -577,10 +577,10 @@
   --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
@@ -642,8 +642,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.23 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: oklch(0.47 0.15 147);
@@ -672,10 +672,10 @@
   --dt-inputs-color-foreground-disabled: var(--dt-color-foreground-disabled);
   --dt-inputs-color-foreground-placeholder: var(--dt-color-foreground-placeholder);
   --dt-inputs-color-foreground-default: var(--dt-color-foreground-secondary);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-debug-base.css

@@ -206,6 +206,7 @@
   --dt-size-radius-500: 1.6rem;
   --dt-size-radius-450: 1.2rem;
   --dt-size-radius-400: 0.8rem;
+  --dt-size-radius-350: 0.6rem;
   --dt-size-radius-300: 0.4rem;
   --dt-size-radius-200: 0.2rem;
   --dt-size-radius-100: 0.1rem;
@@ -491,17 +492,17 @@
   --dt-space-50: var(--dt-size-50);
   --dt-space-0: var(--dt-size-0);
   --dt-font-family-expressive: "Season Mix", var(--dt-font-family-body);
-  --dt-font-size-500: calc(1rem * 3.2); /* xxl / extra large */
-  --dt-font-size-400: calc(1rem * 2.8); /* xl / extra large */
-  --dt-font-size-350: calc(1rem * 2.4); /* mlg / medium-large / milge / marge */
-  --dt-font-size-300: calc(1rem * 2); /* lg / large */
-  --dt-font-size-250: calc(1rem * 1.8);
-  --dt-font-size-200: calc(1rem * 1.6); /* md / medium / base */
-  --dt-font-size-150: calc(1rem * 1.4); /* smd / small-medium / smedium */
-  --dt-font-size-125: calc(1rem * 1.3);
-  --dt-font-size-100: calc(1rem * 1.2); /* sm / small */
-  --dt-font-size-75: calc(1rem * 1.1); /* xs / extra small */
-  --dt-font-size-50: calc(1rem * 1); /* xxs / extra extra small */
+  --dt-font-size-500: calc(var(--dt-font-size-root) * 3.2); /* xxl / extra large */
+  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* xl / extra large */
+  --dt-font-size-350: calc(var(--dt-font-size-root) * 2.4); /* mlg / medium-large / milge / marge */
+  --dt-font-size-300: calc(var(--dt-font-size-root) * 2); /* lg / large */
+  --dt-font-size-250: calc(var(--dt-font-size-root) * 1.8);
+  --dt-font-size-200: calc(var(--dt-font-size-root) * 1.6); /* md / medium / base */
+  --dt-font-size-150: calc(var(--dt-font-size-root) * 1.4); /* smd / small-medium / smedium */
+  --dt-font-size-125: calc(var(--dt-font-size-root) * 1.3);
+  --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* sm / small */
+  --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
+  --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
   --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
   --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */
   --dt-layout-1500: calc(var(--dt-layout-base) * 15); /* 960px */

package/lib/dist/tokens/tokens-debug-dp.css

@@ -79,16 +79,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.7 0.25 54.01);
@@ -142,12 +142,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -571,10 +571,10 @@
   --dt-checkbox-color-border-unchecked: oklch(0.7 0.25 54.01);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: oklch(0.7 0.25 54.01);
   --dt-badge-color-background-bulletin: oklch(0.7 0.25 54.01);
@@ -664,10 +664,10 @@
   --dt-inputs-color-foreground-disabled: oklch(0.7 0.25 54.01);
   --dt-inputs-color-foreground-placeholder: oklch(0.7 0.25 54.01);
   --dt-inputs-color-foreground-default: oklch(0.7 0.25 54.01);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-dp-dark.css

@@ -79,16 +79,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.65 0.2 290 / 0.6);
@@ -144,12 +144,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -573,10 +573,10 @@
   --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-foreground-bulletin-subtle: oklch(0.92 0 0);
@@ -632,8 +632,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
@@ -665,10 +665,10 @@
   --dt-inputs-color-foreground-disabled: var(--dt-color-foreground-disabled);
   --dt-inputs-color-foreground-placeholder: var(--dt-color-foreground-placeholder);
   --dt-inputs-color-foreground-default: var(--dt-color-foreground-primary);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-dp-light.css

@@ -79,16 +79,16 @@
   --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
   --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
   --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
-  --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
+  --dt-button-size-radius-sm: var(--dt-size-radius-350); /* Border radius for small button */
   --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
   --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
   --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
   --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
-  --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
+  --dt-button-line-height-sm: var(--dt-font-line-height-300); /* Line-height for SM button */
   --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
   --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
   --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
-  --dt-button-font-weight-md: var(--dt-font-weight-semi-bold); /* Font weight for MD button */
+  --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
   --dt-button-font-weight-sm: var(--dt-font-weight-semi-bold); /* Font weight for SM button */
   --dt-button-font-weight-xs: var(--dt-font-weight-semi-bold); /* Font weight for XS button */
   --dt-badge-color-border-bulletin-subtle: oklch(0.59 0.24 288 / 0.5);
@@ -142,12 +142,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -571,10 +571,10 @@
   --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
   --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
   --dt-checkbox-size-height: var(--dt-checkbox-size-width);
-  --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
+  --dt-button-font-size-xl: var(--dt-font-size-350); /* Extra large Button text size */
   --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
   --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
-  --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
+  --dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
   --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
   --dt-badge-color-border-default: var(--dt-color-border-subtle);
   --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
@@ -634,8 +634,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.23 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: oklch(0.47 0.15 147);
@@ -664,10 +664,10 @@
   --dt-inputs-color-foreground-disabled: var(--dt-color-foreground-disabled);
   --dt-inputs-color-foreground-placeholder: var(--dt-color-foreground-placeholder);
   --dt-inputs-color-foreground-default: var(--dt-color-foreground-secondary);
-  --dt-inputs-font-size-xl: var(--dt-font-size-400); /* Font size for extra large inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-xl: var(--dt-font-size-350); /* Font size for extra large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-expressive-dark.css

@@ -130,12 +130,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -506,12 +506,12 @@
   --dt-color-foreground-secondary: var(--dt-color-black-700); /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
   --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
   --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
-  --dt-font-size-600: calc(1rem * 10.5);
-  --dt-font-size-500: calc(1rem * 6.5); /* extra large / xxl */
-  --dt-font-size-400: calc(1rem * 4.1); /* extra large / xl */
-  --dt-font-size-300: calc(1rem * 2.8); /* large */
-  --dt-font-size-200: calc(1rem * 2); /* medium / base */
-  --dt-font-size-100: calc(1rem * 1.6); /* small */
+  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
+  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
+  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
+  --dt-font-size-300: calc(var(--dt-font-size-root) * 2.8); /* large */
+  --dt-font-size-200: calc(var(--dt-font-size-root) * 2); /* medium / base */
+  --dt-font-size-100: calc(var(--dt-font-size-root) * 1.6); /* small */
   --dt-radio-color-foreground-checked: var(--dt-color-foreground-primary-inverted);
   --dt-radio-color-background-checked: var(--dt-color-surface-brand-strong);
   --dt-radio-color-border-checked: var(--dt-color-border-brand);
@@ -584,8 +584,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
@@ -620,7 +620,7 @@
   --dt-inputs-font-size-xl: var(--dt-font-size-100);
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */

package/lib/dist/tokens/tokens-expressive-light.css

@@ -127,12 +127,12 @@
   --dt-inputs-line-height-xl: var(--dt-font-line-height-200); /* Line height for extra large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-lg: var(--dt-font-line-height-200); /* Line height for large inputs (e.g. input and textarea) */
   --dt-inputs-line-height-md: var(--dt-font-line-height-200); /* Line height for medium inputs (e.g. input and textarea) */
-  --dt-inputs-line-height-sm: var(--dt-font-line-height-200); /* Line height for small inputs (e.g. input and textarea) */
+  --dt-inputs-line-height-sm: var(--dt-font-line-height-300); /* Line height for small inputs (e.g. input and textarea) */
   --dt-inputs-line-height-xs: var(--dt-font-line-height-200); /* Line height for extra small inputs (e.g. input and textarea) */
   --dt-inputs-size-radius-xl: var(--dt-size-radius-500);
   --dt-inputs-size-radius-lg: var(--dt-size-radius-450);
   --dt-inputs-size-radius-md: var(--dt-size-radius-400);
-  --dt-inputs-size-radius-sm: var(--dt-size-radius-400);
+  --dt-inputs-size-radius-sm: var(--dt-size-radius-350);
   --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
   --dt-inputs-size-border-status: var(--dt-size-border-200);
   --dt-inputs-size-border-default: var(--dt-size-border-150);
@@ -503,12 +503,12 @@
   --dt-color-foreground-secondary: var(--dt-color-black-700); /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
   --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
   --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
-  --dt-font-size-600: calc(1rem * 10.5);
-  --dt-font-size-500: calc(1rem * 6.5); /* extra large / xxl */
-  --dt-font-size-400: calc(1rem * 4.1); /* extra large / xl */
-  --dt-font-size-300: calc(1rem * 2.8); /* large */
-  --dt-font-size-200: calc(1rem * 2); /* medium / base */
-  --dt-font-size-100: calc(1rem * 1.6); /* small */
+  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
+  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
+  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
+  --dt-font-size-300: calc(var(--dt-font-size-root) * 2.8); /* large */
+  --dt-font-size-200: calc(var(--dt-font-size-root) * 2); /* medium / base */
+  --dt-font-size-100: calc(var(--dt-font-size-root) * 1.6); /* small */
   --dt-radio-color-foreground-checked: var(--dt-color-foreground-primary-inverted);
   --dt-radio-color-background-checked: var(--dt-color-surface-brand-strong);
   --dt-radio-color-border-checked: var(--dt-color-border-brand);
@@ -586,8 +586,8 @@
   --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
   --dt-theme-topbar-color-foreground: oklch(0.23 0 0 / 0.8);
   --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
-  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
-  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
+  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-moderate);
+  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-moderate-inverted);
   --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
   --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
   --dt-action-color-background-positive-primary-active: oklch(0.47 0.15 147);
@@ -619,7 +619,7 @@
   --dt-inputs-font-size-xl: var(--dt-font-size-100);
   --dt-inputs-font-size-lg: var(--dt-font-size-300); /* Font size for large inputs (e.g. input and textarea) */
   --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
-  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
+  --dt-inputs-font-size-sm: var(--dt-font-size-125); /* Font size for small inputs (e.g. input and textarea) */
   --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
   --dt-text-code-xs-font-size: var(--dt-font-size-100); /* Extra small code style */
   --dt-text-code-sm-font-size: var(--dt-font-size-150); /* Small code style */