@dialpad/dialtone-tokens 1.16.0 → 1.18.0

package/dist/css/variables-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 20:35:43 GMT
+ * Generated on Tue, 30 May 2023 23:54:29 GMT
  */
 
 .dialtone-theme-light {
@@ -226,137 +226,137 @@
   --dt-color-brand-magenta: #f9008e;
   --dt-typography-body-small-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";
   --dt-typography-body-small-font-weight: 400;
-  --dt-typography-body-small-line-height: 140%;
+  --dt-typography-body-small-line-height: 1.4;
   --dt-typography-body-small-font-size: 1.2rem;
   --dt-typography-body-small-text-case: none;
   --dt-typography-body-base-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";
   --dt-typography-body-base-font-weight: 400;
-  --dt-typography-body-base-line-height: 160%;
+  --dt-typography-body-base-line-height: 1.6;
   --dt-typography-body-base-font-size: 1.5rem;
   --dt-typography-body-base-text-case: none;
   --dt-typography-body-compact-small-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";
   --dt-typography-body-compact-small-font-weight: 400;
-  --dt-typography-body-compact-small-line-height: 120%;
+  --dt-typography-body-compact-small-line-height: 1.2;
   --dt-typography-body-compact-small-font-size: 1.2rem;
   --dt-typography-body-compact-small-text-case: none;
   --dt-typography-body-compact-base-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";
   --dt-typography-body-compact-base-font-weight: 400;
-  --dt-typography-body-compact-base-line-height: 140%;
+  --dt-typography-body-compact-base-line-height: 1.4;
   --dt-typography-body-compact-base-font-size: 1.5rem;
   --dt-typography-body-compact-base-text-case: none;
   --dt-typography-headline-eyebrow-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";
   --dt-typography-headline-eyebrow-font-weight: 400;
-  --dt-typography-headline-eyebrow-line-height: 140%;
+  --dt-typography-headline-eyebrow-line-height: 1.4;
   --dt-typography-headline-eyebrow-font-size: 1.2rem;
   --dt-typography-headline-eyebrow-text-case: uppercase;
   --dt-typography-headline-small-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";
   --dt-typography-headline-small-font-weight: 700;
-  --dt-typography-headline-small-line-height: 140%;
+  --dt-typography-headline-small-line-height: 1.4;
   --dt-typography-headline-small-font-size: 1.2rem;
   --dt-typography-headline-small-text-case: none;
   --dt-typography-headline-medium-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";
   --dt-typography-headline-medium-font-weight: 700;
-  --dt-typography-headline-medium-line-height: 160%;
+  --dt-typography-headline-medium-line-height: 1.6;
   --dt-typography-headline-medium-font-size: 1.5rem;
   --dt-typography-headline-medium-text-case: none;
   --dt-typography-headline-large-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";
   --dt-typography-headline-large-font-weight: 700;
-  --dt-typography-headline-large-line-height: 160%;
+  --dt-typography-headline-large-line-height: 1.6;
   --dt-typography-headline-large-font-size: 1.9rem;
   --dt-typography-headline-large-text-case: none;
   --dt-typography-headline-extra-large-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";
   --dt-typography-headline-extra-large-font-weight: 500;
-  --dt-typography-headline-extra-large-line-height: 120%;
+  --dt-typography-headline-extra-large-line-height: 1.2;
   --dt-typography-headline-extra-large-font-size: 2.7rem;
   --dt-typography-headline-extra-large-text-case: none;
   --dt-typography-headline-extra-extra-large-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";
   --dt-typography-headline-extra-extra-large-font-weight: 500;
-  --dt-typography-headline-extra-extra-large-line-height: 120%;
+  --dt-typography-headline-extra-extra-large-line-height: 1.2;
   --dt-typography-headline-extra-extra-large-font-size: 3.8rem;
   --dt-typography-headline-extra-extra-large-text-case: none;
   --dt-typography-headline-soft-small-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";
   --dt-typography-headline-soft-small-font-weight: 500;
-  --dt-typography-headline-soft-small-line-height: 140%;
+  --dt-typography-headline-soft-small-line-height: 1.4;
   --dt-typography-headline-soft-small-font-size: 1.2rem;
   --dt-typography-headline-soft-small-text-case: none;
   --dt-typography-headline-compact-small-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";
   --dt-typography-headline-compact-small-font-weight: 700;
-  --dt-typography-headline-compact-small-line-height: 120%;
+  --dt-typography-headline-compact-small-line-height: 1.2;
   --dt-typography-headline-compact-small-font-size: 1.2rem;
   --dt-typography-headline-compact-small-text-case: none;
   --dt-typography-headline-compact-medium-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";
   --dt-typography-headline-compact-medium-font-weight: 700;
-  --dt-typography-headline-compact-medium-line-height: 140%;
+  --dt-typography-headline-compact-medium-line-height: 1.4;
   --dt-typography-headline-compact-medium-font-size: 1.5rem;
   --dt-typography-headline-compact-medium-text-case: none;
   --dt-typography-headline-compact-large-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";
   --dt-typography-headline-compact-large-font-weight: 700;
-  --dt-typography-headline-compact-large-line-height: 120%;
+  --dt-typography-headline-compact-large-line-height: 1.2;
   --dt-typography-headline-compact-large-font-size: 1.9rem;
   --dt-typography-headline-compact-large-text-case: none;
   --dt-typography-headline-compact-soft-small-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";
   --dt-typography-headline-compact-soft-small-font-weight: 500;
-  --dt-typography-headline-compact-soft-small-line-height: 120%;
+  --dt-typography-headline-compact-soft-small-line-height: 1.2;
   --dt-typography-headline-compact-soft-small-font-size: 1.2rem;
   --dt-typography-headline-compact-soft-small-text-case: none;
   --dt-typography-label-small-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";
   --dt-typography-label-small-font-weight: 600;
-  --dt-typography-label-small-line-height: 140%;
+  --dt-typography-label-small-line-height: 1.4;
   --dt-typography-label-small-font-size: 1.2rem;
   --dt-typography-label-small-text-case: none;
   --dt-typography-label-base-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";
   --dt-typography-label-base-font-weight: 600;
-  --dt-typography-label-base-line-height: 160%;
+  --dt-typography-label-base-line-height: 1.6;
   --dt-typography-label-base-font-size: 1.5rem;
   --dt-typography-label-base-text-case: none;
   --dt-typography-label-compact-small-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";
   --dt-typography-label-compact-small-font-weight: 600;
-  --dt-typography-label-compact-small-line-height: 120%;
+  --dt-typography-label-compact-small-line-height: 1.2;
   --dt-typography-label-compact-small-font-size: 1.2rem;
   --dt-typography-label-compact-small-text-case: none;
   --dt-typography-label-compact-base-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";
   --dt-typography-label-compact-base-font-weight: 600;
-  --dt-typography-label-compact-base-line-height: 140%;
+  --dt-typography-label-compact-base-line-height: 1.4;
   --dt-typography-label-compact-base-font-size: 1.5rem;
   --dt-typography-label-compact-base-text-case: none;
   --dt-typography-label-compact-plain-small-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";
   --dt-typography-label-compact-plain-small-font-weight: 400;
-  --dt-typography-label-compact-plain-small-line-height: 120%;
+  --dt-typography-label-compact-plain-small-line-height: 1.2;
   --dt-typography-label-compact-plain-small-font-size: 1.2rem;
   --dt-typography-label-compact-plain-small-text-case: none;
   --dt-typography-label-compact-plain-base-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";
   --dt-typography-label-compact-plain-base-font-weight: 400;
-  --dt-typography-label-compact-plain-base-line-height: 140%;
+  --dt-typography-label-compact-plain-base-line-height: 1.4;
   --dt-typography-label-compact-plain-base-font-size: 1.5rem;
   --dt-typography-label-compact-plain-base-text-case: none;
   --dt-typography-label-plain-small-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";
   --dt-typography-label-plain-small-font-weight: 400;
-  --dt-typography-label-plain-small-line-height: 140%;
+  --dt-typography-label-plain-small-line-height: 1.4;
   --dt-typography-label-plain-small-font-size: 1.2rem;
   --dt-typography-label-plain-small-text-case: none;
   --dt-typography-label-plain-base-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";
   --dt-typography-label-plain-base-font-weight: 400;
-  --dt-typography-label-plain-base-line-height: 160%;
+  --dt-typography-label-plain-base-line-height: 1.6;
   --dt-typography-label-plain-base-font-size: 1.5rem;
   --dt-typography-label-plain-base-text-case: none;
   --dt-typography-helper-small-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";
   --dt-typography-helper-small-font-weight: 400;
-  --dt-typography-helper-small-line-height: 120%;
+  --dt-typography-helper-small-line-height: 1.2;
   --dt-typography-helper-small-font-size: 1.2rem;
   --dt-typography-helper-small-text-case: none;
   --dt-typography-helper-base-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";
   --dt-typography-helper-base-font-weight: 400;
-  --dt-typography-helper-base-line-height: 140%;
+  --dt-typography-helper-base-line-height: 1.4;
   --dt-typography-helper-base-font-size: 1.5rem;
   --dt-typography-helper-base-text-case: none;
   --dt-typography-code-small-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --dt-typography-code-small-font-weight: 400;
-  --dt-typography-code-small-line-height: 120%;
+  --dt-typography-code-small-line-height: 1.2;
   --dt-typography-code-small-font-size: 1.2rem;
   --dt-typography-code-small-text-case: none;
   --dt-typography-code-base-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --dt-typography-code-base-font-weight: 400;
-  --dt-typography-code-base-line-height: 120%;
+  --dt-typography-code-base-line-height: 1.2;
   --dt-typography-code-base-font-size: 1.5rem;
   --dt-typography-code-base-text-case: none;
   --dt-size-0: 0rem;
@@ -368,6 +368,7 @@
   --dt-size-400: 0.8rem;
   --dt-size-450: 1.2rem;
   --dt-size-500: 1.6rem;
+  --dt-size-525: 2rem;
   --dt-size-550: 2.4rem;
   --dt-size-600: 3.2rem;
   --dt-size-625: 4.2rem;
@@ -416,6 +417,7 @@
   --dt-size-400-negative: -0.8rem;
   --dt-size-450-negative: -1.2rem;
   --dt-size-500-negative: -1.6rem;
+  --dt-size-525-negative: -2rem;
   --dt-size-550-negative: -2.4rem;
   --dt-size-600-negative: -3.2rem;
   --dt-size-625-negative: -4.2rem;
@@ -482,7 +484,7 @@
   --dt-inputs-size-radius-md: 0.8rem;
   --dt-inputs-size-radius-lg: 1.2rem;
   --dt-inputs-size-radius-xl: 1.6rem;
-  --dt-inputs-line-height-default: 120%;
+  --dt-inputs-line-height-default: 1.2;
   --dt-inputs-font-size-xs: 1.2rem;
   --dt-inputs-font-size-sm: 1.2rem;
   --dt-inputs-font-size-md: 1.5rem;
@@ -519,8 +521,8 @@
   --dt-action-color-foreground-muted-active: #3A3A3A;
   --dt-action-color-foreground-disabled-default: #808080;
   --dt-action-color-background-base-default: transparent;
-  --dt-action-color-background-base-hover: #7c52ff0a;
-  --dt-action-color-background-base-active: #7c52ff24;
+  --dt-action-color-background-base-hover: #7c52ff24;
+  --dt-action-color-background-base-active: #7c52ff2e;
   --dt-action-color-background-base-primary-default: #7C52FF;
   --dt-action-color-background-base-primary-hover: #6533FF;
   --dt-action-color-background-base-primary-active: #4D14FF;
@@ -537,22 +539,42 @@
   --dt-action-color-background-inverted-primary-hover: #F5F0FF;
   --dt-action-color-background-inverted-primary-active: #E1D1FF;
   --dt-action-color-background-muted-default: transparent;
-  --dt-action-color-background-muted-hover: #2222220d;
-  --dt-action-color-background-muted-active: #2222221a;
+  --dt-action-color-background-muted-hover: #2222221a;
+  --dt-action-color-background-muted-active: #22222229;
   --dt-action-color-background-disabled-default: #D2D2D2;
   --dt-action-color-border-base-outlined-default: #7C52FF;
   --dt-action-color-border-critical-outlined-default: #EC0E0E;
   --dt-action-color-border-inverted-outlined-default: #F9F9F9;
   --dt-action-color-border-muted-outlined-default: #555555;
+  --dt-theme-color-base: #000000;
+  --dt-theme-topbar-color-foreground: #000000bf;
+  --dt-theme-topbar-color-background: #F9F9F9;
+  --dt-theme-topbar-field-color-foreground: #00000080;
+  --dt-theme-topbar-field-color-foreground-hover: #000000bf;
+  --dt-theme-topbar-field-color-background: #0000000d;
+  --dt-theme-topbar-field-color-background-hover: #fff;
+  --dt-theme-topbar-field-color-border: #0000;
+  --dt-theme-topbar-field-color-border-hover: #0000001a;
+  --dt-theme-topbar-field-color-border-active: #0003;
+  --dt-theme-topbar-button-color-foreground: #000000a6;
+  --dt-theme-topbar-button-color-foreground-hover: #000000;
+  --dt-theme-topbar-button-color-background: #0000;
+  --dt-theme-topbar-button-color-background-hover: #0000000d;
+  --dt-theme-topbar-button-color-background-active: #0000001a;
+  --dt-theme-topbar-profile-color-foreground: #000000bf;
+  --dt-theme-topbar-profile-color-background: #0000000d;
+  --dt-theme-topbar-profile-color-background-hover: #0000001a;
+  --dt-theme-topbar-profile-color-background-active: #00000024;
   --dt-theme-sidebar-color-foreground: #000000;
   --dt-theme-sidebar-color-background: #F9F9F9;
-  --dt-theme-sidebar-icon-color-foreground: #3A3A3A;
-  --dt-theme-sidebar-status-color-foreground: #555555;
-  --dt-theme-sidebar-row-color-background: transparent;
-  --dt-theme-sidebar-row-color-background-hover: #0000001a;
-  --dt-theme-sidebar-row-color-background-active: #D2D2D2;
+  --dt-theme-sidebar-icon-color-foreground: #3b3b3b;
+  --dt-theme-sidebar-status-color-foreground: #545454;
+  --dt-theme-sidebar-row-color-background: #0000;
+  --dt-theme-sidebar-row-color-background-hover: #0000001f;
+  --dt-theme-sidebar-row-color-background-active: #00000029;
   --dt-theme-sidebar-selected-row-color-foreground: #000000;
-  --dt-theme-sidebar-selected-row-color-background: #E9E9E9;
+  --dt-theme-sidebar-selected-row-color-background: #0000001a;
+  --dt-theme-sidebar-section-color-foreground: #545454;
   --dt-theme-presence-color-background-available: #1AA340;
   --dt-theme-presence-color-background-busy-unavailable: #EC0E0E;
   --dt-theme-presence-color-background-busy: #F6AB3C;
@@ -582,12 +604,12 @@
   --dt-font-size-400: 2.7rem;
   --dt-font-size-500: 3.8rem;
   --dt-font-size-root: 1rem;
-  --dt-font-line-height-100: 100%;
-  --dt-font-line-height-200: 120%;
-  --dt-font-line-height-300: 140%;
-  --dt-font-line-height-400: 160%;
-  --dt-font-line-height-500: 180%;
-  --dt-font-line-height-600: 200%;
+  --dt-font-line-height-100: 1;
+  --dt-font-line-height-200: 1.2;
+  --dt-font-line-height-300: 1.4;
+  --dt-font-line-height-400: 1.6;
+  --dt-font-line-height-500: 1.8;
+  --dt-font-line-height-600: 2;
   --dt-font-weight-normal: 400;
   --dt-font-weight-medium: 500;
   --dt-font-weight-semi-bold: 600;
@@ -596,87 +618,89 @@
   --dt-font-text-case-lowercase: lowercase;
   --dt-font-text-case-capitalize: capitalize;
   --dt-font-text-case-none: none;
-  --dt-space-0: 0px;
-  --dt-space-50: 0.5px;
-  --dt-space-100: 1px;
-  --dt-space-200: 2px;
-  --dt-space-300: 4px;
-  --dt-space-350: 6px;
-  --dt-space-400: 8px;
-  --dt-space-450: 12px;
-  --dt-space-500: 16px;
-  --dt-space-550: 24px;
-  --dt-space-600: 32px;
-  --dt-space-625: 42px;
-  --dt-space-650: 48px;
-  --dt-space-700: 64px;
-  --dt-space-720: 72px;
-  --dt-space-730: 84px;
-  --dt-space-750: 96px;
-  --dt-space-760: 102px;
-  --dt-space-775: 114px;
-  --dt-space-800: 128px;
-  --dt-space-825: 164px;
-  --dt-space-850: 192px;
-  --dt-space-875: 216px;
-  --dt-space-900: 256px;
-  --dt-space-905: 264px;
-  --dt-space-925: 332px;
-  --dt-space-950: 384px;
-  --dt-space-975: 464px;
-  --dt-space-1000: 512px;
-  --dt-space-1020: 628px;
-  --dt-space-1040: 764px;
-  --dt-space-1050: 768px;
-  --dt-space-1060: 828px;
-  --dt-space-1080: 912px;
-  --dt-space-1100: 1024px;
-  --dt-space-1115: 1140px;
-  --dt-space-1120: 1268px;
-  --dt-space-1125: 1280px;
-  --dt-space-1130: 1340px;
-  --dt-space-1150: 1536px;
-  --dt-space-1200: 2048px;
-  --dt-space-50-negative: -0.5px;
-  --dt-space-100-negative: -1px;
-  --dt-space-200-negative: -2px;
-  --dt-space-300-negative: -4px;
-  --dt-space-350-negative: -6px;
-  --dt-space-400-negative: -8px;
-  --dt-space-450-negative: -12px;
-  --dt-space-500-negative: -16px;
-  --dt-space-550-negative: -24px;
-  --dt-space-600-negative: -32px;
-  --dt-space-625-negative: -42px;
-  --dt-space-650-negative: -48px;
-  --dt-space-700-negative: -64px;
-  --dt-space-720-negative: -72px;
-  --dt-space-730-negative: -84px;
-  --dt-space-750-negative: -96px;
-  --dt-space-760-negative: -102px;
-  --dt-space-775-negative: -114px;
-  --dt-space-800-negative: -128px;
-  --dt-space-825-negative: -164px;
-  --dt-space-850-negative: -192px;
-  --dt-space-875-negative: -216px;
-  --dt-space-900-negative: -256px;
-  --dt-space-905-negative: -264px;
-  --dt-space-925-negative: -332px;
-  --dt-space-950-negative: -384px;
-  --dt-space-975-negative: -464px;
-  --dt-space-1000-negative: -512px;
-  --dt-space-1020-negative: -628px;
-  --dt-space-1040-negative: -764px;
-  --dt-space-1050-negative: -768px;
-  --dt-space-1060-negative: -828px;
-  --dt-space-1080-negative: -912px;
-  --dt-space-1100-negative: -1024px;
-  --dt-space-1115-negative: -1140px;
-  --dt-space-1120-negative: -1268px;
-  --dt-space-1125-negative: -1280px;
-  --dt-space-1130-negative: -1340px;
-  --dt-space-1150-negative: -1536px;
-  --dt-space-1200-negative: -2048px;
+  --dt-space-0: 0;
+  --dt-space-50: 0.05rem;
+  --dt-space-100: 0.1rem;
+  --dt-space-200: 0.2rem;
+  --dt-space-300: 0.4rem;
+  --dt-space-350: 0.6rem;
+  --dt-space-400: 0.8rem;
+  --dt-space-450: 1.2rem;
+  --dt-space-500: 1.6rem;
+  --dt-space-525: 2rem;
+  --dt-space-550: 2.4rem;
+  --dt-space-600: 3.2rem;
+  --dt-space-625: 4.2rem;
+  --dt-space-650: 4.8rem;
+  --dt-space-700: 6.4rem;
+  --dt-space-720: 7.2rem;
+  --dt-space-730: 8.4rem;
+  --dt-space-750: 9.6rem;
+  --dt-space-760: 10.2rem;
+  --dt-space-775: 11.4rem;
+  --dt-space-800: 12.8rem;
+  --dt-space-825: 16.4rem;
+  --dt-space-850: 19.2rem;
+  --dt-space-875: 21.6rem;
+  --dt-space-900: 25.6rem;
+  --dt-space-905: 26.4rem;
+  --dt-space-925: 33.2rem;
+  --dt-space-950: 38.4rem;
+  --dt-space-975: 46.4rem;
+  --dt-space-1000: 51.2rem;
+  --dt-space-1020: 62.8rem;
+  --dt-space-1040: 76.4rem;
+  --dt-space-1050: 76.8rem;
+  --dt-space-1060: 82.8rem;
+  --dt-space-1080: 91.2rem;
+  --dt-space-1100: 102.4rem;
+  --dt-space-1115: 114rem;
+  --dt-space-1120: 126.8rem;
+  --dt-space-1125: 128rem;
+  --dt-space-1130: 134rem;
+  --dt-space-1150: 153.6rem;
+  --dt-space-1200: 204.8rem;
+  --dt-space-50-negative: -0.05rem;
+  --dt-space-100-negative: -0.1rem;
+  --dt-space-200-negative: -0.2rem;
+  --dt-space-300-negative: -0.4rem;
+  --dt-space-350-negative: -0.6rem;
+  --dt-space-400-negative: -0.8rem;
+  --dt-space-450-negative: -1.2rem;
+  --dt-space-500-negative: -1.6rem;
+  --dt-space-525-negative: -2rem;
+  --dt-space-550-negative: -2.4rem;
+  --dt-space-600-negative: -3.2rem;
+  --dt-space-625-negative: -4.2rem;
+  --dt-space-650-negative: -4.8rem;
+  --dt-space-700-negative: -6.4rem;
+  --dt-space-720-negative: -7.2rem;
+  --dt-space-730-negative: -8.4rem;
+  --dt-space-750-negative: -9.6rem;
+  --dt-space-760-negative: -10.2rem;
+  --dt-space-775-negative: -11.4rem;
+  --dt-space-800-negative: -12.8rem;
+  --dt-space-825-negative: -16.4rem;
+  --dt-space-850-negative: -19.2rem;
+  --dt-space-875-negative: -21.6rem;
+  --dt-space-900-negative: -25.6rem;
+  --dt-space-905-negative: -26.4rem;
+  --dt-space-925-negative: -33.2rem;
+  --dt-space-950-negative: -38.4rem;
+  --dt-space-975-negative: -46.4rem;
+  --dt-space-1000-negative: -51.2rem;
+  --dt-space-1020-negative: -62.8rem;
+  --dt-space-1040-negative: -76.4rem;
+  --dt-space-1050-negative: -76.8rem;
+  --dt-space-1060-negative: -82.8rem;
+  --dt-space-1080-negative: -91.2rem;
+  --dt-space-1100-negative: -102.4rem;
+  --dt-space-1115-negative: -114rem;
+  --dt-space-1120-negative: -126.8rem;
+  --dt-space-1125-negative: -128rem;
+  --dt-space-1130-negative: -134rem;
+  --dt-space-1150-negative: -153.6rem;
+  --dt-space-1200-negative: -204.8rem;
   --dt-space-0-percent: 0%;
   --dt-space-5-percent: 5%;
   --dt-space-10-percent: 10%;
@@ -694,7 +718,7 @@
   --dt-space-90-percent: 90%;
   --dt-space-95-percent: 95%;
   --dt-space-100-percent: 100%;
-  --dt-space-base: 8px;
+  --dt-space-base: 0.8rem;
   --dt-shadow-small-0-x: 0;
   --dt-shadow-small-0-y: 0.2rem;
   --dt-shadow-small-0-blur: 0.4rem;