@transferwise/neptune-tokens 0.0.0-experimental-b6daf3f

package/themes/personal--bright-green/tokens.css

@@ -0,0 +1,243 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 May 2024 10:39:19 GMT
+ */
+
+.np-theme-personal--bright-green {
+  --color-bright-yellow: #ffeb69;
+  --color-bright-orange: #ffc091;
+  --color-dark-purple: #260a2f;
+  --color-dark-gold: #3a341c;
+  --color-bright-blue: #a0e1e1;
+  --color-dark-charcoal: #21231d;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-bright-green: #9fe870;
+  --color-forest-green: #163300;
+  --color-bright-pink: #ffd7ef;
+  --color-dark-maroon: #320707;
+  --color-content-primary: #163300;
+  --color-content-secondary: #163300;
+  --color-content-tertiary: #ffffff00;
+  --color-content-link: #163300;
+  --color-content-link-hover: #0d1f00;
+  --color-content-link-active: #0e0f0c;
+  --color-interactive-primary: #163300;
+  --color-interactive-primary-hover: #0c2300;
+  --color-interactive-primary-active: #001a00;
+  --color-interactive-primary-hover: #0d1f00;
+  --color-interactive-primary-hover-hover: #001100;
+  --color-interactive-primary-hover-active: #000000;
+  --color-interactive-primary-active: #0e0f0c;
+  --color-interactive-primary-active-hover: #000000;
+  --color-interactive-primary-active-active: #000000;
+  --color-interactive-secondary: #ffffff00;
+  --color-interactive-secondary-hover: #eaeaea00;
+  --color-interactive-secondary-active: #dbdbdb00;
+  --color-interactive-secondary-hover: #ffffff00;
+  --color-interactive-secondary-hover-hover: #eaeaea00;
+  --color-interactive-secondary-hover-active: #dbdbdb00;
+  --color-interactive-secondary-active: #ffffff00;
+  --color-interactive-secondary-active-hover: #eaeaea00;
+  --color-interactive-secondary-active-active: #dbdbdb00;
+  --color-interactive-accent: #163300;
+  --color-interactive-accent-hover: #0c2300;
+  --color-interactive-accent-active: #001a00;
+  --color-interactive-accent-hover: #0d1f00;
+  --color-interactive-accent-hover-hover: #001100;
+  --color-interactive-accent-hover-active: #000000;
+  --color-interactive-accent-active: #0e0f0c;
+  --color-interactive-accent-active-hover: #000000;
+  --color-interactive-accent-active-active: #000000;
+  --color-interactive-control: #9fe870;
+  --color-interactive-control-hover: #8bd35d;
+  --color-interactive-control-active: #7cc44f;
+  --color-interactive-control-hover: #bbef9a;
+  --color-interactive-control-hover-hover: #a7da87;
+  --color-interactive-control-hover-active: #98cb79;
+  --color-interactive-control-active: #d9f6c6;
+  --color-interactive-control-active-hover: #c5e1b2;
+  --color-interactive-control-active-active: #b6d2a4;
+  --color-interactive-contrast: #9fe870;
+  --color-interactive-contrast-hover: #cdffad;
+  --color-interactive-contrast-hover-hover: #b9ea9a;
+  --color-interactive-contrast-hover-active: #aadb8b;
+  --color-interactive-contrast-active: #ecffe0;
+  --color-interactive-contrast-active-hover: #d8eacc;
+  --color-interactive-contrast-active-active: #c8dbbd;
+  --color-border-neutral: #ffffff00;
+  --color-border-overlay: #ffffff00;
+  --color-background-screen: #9fe870;
+  --color-background-screen-hover: #ffffff66;
+  --color-background-screen-active: #ffffff66;
+  --color-background-elevated: #ffffff00;
+  --color-background-neutral: #ffffff4d;
+  --color-background-neutral-hover: #ffffff00;
+  --color-background-neutral-active: #ffffff00;
+  --color-background-overlay: #ffffff00;
+  --color-sentiment-negative: #ffffff00;
+  --color-sentiment-negative-hover: #ffffff00;
+  --color-sentiment-negative-active: #ffffff00;
+  --color-sentiment-positive: #ffffff00;
+  --color-sentiment-warning: #ffffff00;
+  --color-contrast: #ffffff00;
+  --color-light: #ffffff;
+  --color-dark: #163300;
+  --color-contrast-overlay: #163300;
+  --color-contrast-theme: #ffffff;
+  --padding-x-small: 8px;
+  --padding-small: 16px;
+  --padding-medium: 24px;
+  --padding-large: 32px;
+  --radius-full: 9999px;
+  --radius-small: 10px;
+  --radius-medium: 16px;
+  --radius-large: 24px;
+  --size-4: 4px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-52: 52px;
+  --size-56: 56px;
+  --size-60: 60px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-88: 88px;
+  --size-96: 96px;
+  --size-104: 104px;
+  --size-112: 112px;
+  --size-120: 120px;
+  --size-126: 126px;
+  --size-128: 128px;
+  --size-146: 146px;
+  --size-154: 154px;
+  --size-160: 160px;
+  --size-x-small: 24px;
+  --size-small: 32px;
+  --size-medium: 40px;
+  --size-large: 48px;
+  --size-x-large: 56px;
+  --size-2x-large: 72px;
+  --space-content-horizontal: 16px;
+  --space-small: 16px;
+  --space-medium: 32px;
+  --space-large: 40px;
+  --space-x-large: 56px;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-22: 1.375rem;
+  --font-size-24: 1.5rem;
+  --font-size-26: 1.625rem;
+  --font-size-28: 1.75rem;
+  --font-size-30: 1.875rem;
+  --font-size-32: 2rem;
+  --letter-spacing-xxs: 0.005em;
+  --letter-spacing-xs: 0.01em;
+  --letter-spacing-sm: 0.0125em;
+  --letter-spacing-md: 0.015em;
+  --letter-spacing-lg: 0.02em;
+  --letter-spacing-xl: 0.025em;
+  --letter-spacing-negative-xxs: -0.005em;
+  --letter-spacing-negative-xs: -0.01em;
+  --letter-spacing-negative-sm: -0.0125em;
+  --letter-spacing-negative-md: -0.015em;
+  --letter-spacing-negative-lg: -0.02em;
+  --letter-spacing-negative-xl: -0.025em;
+  --letter-spacing-negative-xxl: -0.03em;
+  --letter-spacing-negative-xxxl: -0.04em;
+  --letter-spacing-negative-xxxxl: -0.05em;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-30: 1.875rem;
+  --line-height-32: 2rem;
+  --line-height-34: 2.125rem;
+  --line-height-36: 2.25rem;
+  --line-height-42: 2.625rem;
+  --line-height-48: 3rem;
+  --line-height-title: 1.2;
+  --line-height-body: 1.5;
+  --line-height-control: 1.2;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
+}/**
+ * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
+ *
+ * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
+ */
+@media (max-width: 320px) {
+  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
+    --input-height-base: var(--size-32);
+    --input-height-large: var(--input-height-small);
+    --input-padding: var(--input-padding-small);
+    --input-padding-large: var(--input-padding-small);
+    --input-group-addon-padding: var(--input-group-addon-sm-padding);
+    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
+    --btn-height: var(--input-height-base);
+    --btn-lg-height: var(--btn-height);
+    --btn-sm-height: var(--btn-height);
+    --btn-padding: var(--input-padding);
+    --btn-sm-padding: var(--btn-padding);
+    --btn-lg-padding: var(--btn-padding);
+    --dropdown-link-padding: var(--size-12) var(--size-16);
+  }
+}

package/themes/personal--bright-green/tokens.less

@@ -0,0 +1,178 @@
+
+// Do not edit directly
+// Generated on Fri, 10 May 2024 10:39:19 GMT
+
+@color-bright-yellow: #ffeb69;
+@color-bright-orange: #ffc091;
+@color-dark-purple: #260a2f;
+@color-dark-gold: #3a341c;
+@color-bright-blue: #a0e1e1;
+@color-dark-charcoal: #21231d;
+@color-white: #ffffff;
+@color-black: #000000;
+@color-bright-green: #9fe870;
+@color-forest-green: #163300;
+@color-bright-pink: #ffd7ef;
+@color-dark-maroon: #320707;
+@color-content-primary: #163300;
+@color-content-secondary: #163300;
+@color-content-tertiary: #ffffff00;
+@color-content-link: #163300;
+@color-content-link-hover: #0d1f00;
+@color-content-link-active: #0e0f0c;
+@color-interactive-primary: #163300;
+@color-interactive-primary-hover: #0c2300;
+@color-interactive-primary-active: #001a00;
+@color-interactive-primary-hover: #0d1f00;
+@color-interactive-primary-hover-hover: #001100;
+@color-interactive-primary-hover-active: #000000;
+@color-interactive-primary-active: #0e0f0c;
+@color-interactive-primary-active-hover: #000000;
+@color-interactive-primary-active-active: #000000;
+@color-interactive-secondary: #ffffff00;
+@color-interactive-secondary-hover: #eaeaea00;
+@color-interactive-secondary-active: #dbdbdb00;
+@color-interactive-secondary-hover: #ffffff00;
+@color-interactive-secondary-hover-hover: #eaeaea00;
+@color-interactive-secondary-hover-active: #dbdbdb00;
+@color-interactive-secondary-active: #ffffff00;
+@color-interactive-secondary-active-hover: #eaeaea00;
+@color-interactive-secondary-active-active: #dbdbdb00;
+@color-interactive-accent: #163300;
+@color-interactive-accent-hover: #0c2300;
+@color-interactive-accent-active: #001a00;
+@color-interactive-accent-hover: #0d1f00;
+@color-interactive-accent-hover-hover: #001100;
+@color-interactive-accent-hover-active: #000000;
+@color-interactive-accent-active: #0e0f0c;
+@color-interactive-accent-active-hover: #000000;
+@color-interactive-accent-active-active: #000000;
+@color-interactive-control: #9fe870;
+@color-interactive-control-hover: #8bd35d;
+@color-interactive-control-active: #7cc44f;
+@color-interactive-control-hover: #bbef9a;
+@color-interactive-control-hover-hover: #a7da87;
+@color-interactive-control-hover-active: #98cb79;
+@color-interactive-control-active: #d9f6c6;
+@color-interactive-control-active-hover: #c5e1b2;
+@color-interactive-control-active-active: #b6d2a4;
+@color-interactive-contrast: #9fe870;
+@color-interactive-contrast-hover: #cdffad;
+@color-interactive-contrast-hover-hover: #b9ea9a;
+@color-interactive-contrast-hover-active: #aadb8b;
+@color-interactive-contrast-active: #ecffe0;
+@color-interactive-contrast-active-hover: #d8eacc;
+@color-interactive-contrast-active-active: #c8dbbd;
+@color-border-neutral: #ffffff00;
+@color-border-overlay: #ffffff00;
+@color-background-screen: #9fe870;
+@color-background-screen-hover: #ffffff66;
+@color-background-screen-active: #ffffff66;
+@color-background-elevated: #ffffff00;
+@color-background-neutral: #ffffff4d;
+@color-background-neutral-hover: #ffffff00;
+@color-background-neutral-active: #ffffff00;
+@color-background-overlay: #ffffff00;
+@color-sentiment-negative: #ffffff00;
+@color-sentiment-negative-hover: #ffffff00;
+@color-sentiment-negative-active: #ffffff00;
+@color-sentiment-positive: #ffffff00;
+@color-sentiment-warning: #ffffff00;
+@color-contrast: #ffffff00;
+@color-light: #ffffff;
+@color-dark: #163300;
+@color-contrast-overlay: #163300;
+@color-contrast-theme: #ffffff;
+@padding-x-small: 8px;
+@padding-small: 16px;
+@padding-medium: 24px;
+@padding-large: 32px;
+@radius-full: 9999px;
+@radius-small: 10px;
+@radius-medium: 16px;
+@radius-large: 24px;
+@size-4: 4px;
+@size-8: 8px;
+@size-10: 10px;
+@size-12: 12px;
+@size-14: 14px;
+@size-16: 16px;
+@size-24: 24px;
+@size-32: 32px;
+@size-40: 40px;
+@size-48: 48px;
+@size-52: 52px;
+@size-56: 56px;
+@size-60: 60px;
+@size-64: 64px;
+@size-72: 72px;
+@size-80: 80px;
+@size-88: 88px;
+@size-96: 96px;
+@size-104: 104px;
+@size-112: 112px;
+@size-120: 120px;
+@size-126: 126px;
+@size-128: 128px;
+@size-146: 146px;
+@size-154: 154px;
+@size-160: 160px;
+@size-x-small: 24px;
+@size-small: 32px;
+@size-medium: 40px;
+@size-large: 48px;
+@size-x-large: 56px;
+@size-2x-large: 72px;
+@space-content-horizontal: 16px;
+@space-small: 16px;
+@space-medium: 32px;
+@space-large: 40px;
+@space-x-large: 56px;
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem;
+@font-size-20: 1.25rem;
+@font-size-22: 1.375rem;
+@font-size-24: 1.5rem;
+@font-size-26: 1.625rem;
+@font-size-28: 1.75rem;
+@font-size-30: 1.875rem;
+@font-size-32: 2rem;
+@letter-spacing-xxs: 0.005em;
+@letter-spacing-xs: 0.01em;
+@letter-spacing-sm: 0.0125em;
+@letter-spacing-md: 0.015em;
+@letter-spacing-lg: 0.02em;
+@letter-spacing-xl: 0.025em;
+@letter-spacing-negative-xxs: -0.005em;
+@letter-spacing-negative-xs: -0.01em;
+@letter-spacing-negative-sm: -0.0125em;
+@letter-spacing-negative-md: -0.015em;
+@letter-spacing-negative-lg: -0.02em;
+@letter-spacing-negative-xl: -0.025em;
+@letter-spacing-negative-xxl: -0.03em;
+@letter-spacing-negative-xxxl: -0.04em;
+@letter-spacing-negative-xxxxl: -0.05em;
+@line-height-18: 1.125rem;
+@line-height-20: 1.25rem;
+@line-height-22: 1.375rem;
+@line-height-24: 1.5rem;
+@line-height-28: 1.75rem;
+@line-height-30: 1.875rem;
+@line-height-32: 2rem;
+@line-height-34: 2.125rem;
+@line-height-36: 2.25rem;
+@line-height-42: 2.625rem;
+@line-height-48: 3rem;
+@line-height-title: 1.2;
+@line-height-body: 1.5;
+@line-height-control: 1.2;
+@font-weight-light: 300;
+@font-weight-regular: 400;
+@font-weight-medium: 500;
+@font-weight-semi-bold: 600;
+@font-weight-bold: 700;
+@font-weight-black: 900;
+@font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+@font-family-display: 'Wise Sans', 'Inter', sans-serif;

package/themes/personal--dark/tokens.css

@@ -0,0 +1,243 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 May 2024 10:39:19 GMT
+ */
+
+.np-theme-personal--dark {
+  --color-bright-yellow: #ffeb69;
+  --color-bright-orange: #ffc091;
+  --color-dark-purple: #260a2f;
+  --color-dark-gold: #3a341c;
+  --color-bright-blue: #a0e1e1;
+  --color-dark-charcoal: #21231d;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-bright-green: #9fe870;
+  --color-forest-green: #163300;
+  --color-bright-pink: #ffd7ef;
+  --color-dark-maroon: #320707;
+  --color-content-primary: #f3f5f1;
+  --color-content-secondary: #e8ebe6;
+  --color-content-tertiary: #cacfc7;
+  --color-content-link: #9fe870;
+  --color-content-link-hover: #cdffad;
+  --color-content-link-active: #ecffe0;
+  --color-interactive-primary: #9fe870;
+  --color-interactive-primary-hover: #8bd35d;
+  --color-interactive-primary-active: #7cc44f;
+  --color-interactive-primary-hover: #cdffad;
+  --color-interactive-primary-hover-hover: #b9ea9a;
+  --color-interactive-primary-hover-active: #aadb8b;
+  --color-interactive-primary-active: #ecffe0;
+  --color-interactive-primary-active-hover: #d8eacc;
+  --color-interactive-primary-active-active: #c8dbbd;
+  --color-interactive-secondary: #b9bab7;
+  --color-interactive-secondary-hover: #a6a7a4;
+  --color-interactive-secondary-active: #979895;
+  --color-interactive-secondary-hover: #ecede9;
+  --color-interactive-secondary-hover-hover: #d8d9d5;
+  --color-interactive-secondary-hover-active: #c9cac6;
+  --color-interactive-secondary-active: #f9faf6;
+  --color-interactive-secondary-active-hover: #e4e5e1;
+  --color-interactive-secondary-active-active: #d5d6d2;
+  --color-interactive-accent: #9fe870;
+  --color-interactive-accent-hover: #8bd35d;
+  --color-interactive-accent-active: #7cc44f;
+  --color-interactive-accent-hover: #cdffad;
+  --color-interactive-accent-hover-hover: #b9ea9a;
+  --color-interactive-accent-hover-active: #aadb8b;
+  --color-interactive-accent-active: #ecffe0;
+  --color-interactive-accent-active-hover: #d8eacc;
+  --color-interactive-accent-active-active: #c8dbbd;
+  --color-interactive-control: #163300;
+  --color-interactive-control-hover: #0c2300;
+  --color-interactive-control-active: #001a00;
+  --color-interactive-control-hover: #214d00;
+  --color-interactive-control-hover-hover: #103c00;
+  --color-interactive-control-hover-active: #093000;
+  --color-interactive-control-active: #2c6600;
+  --color-interactive-control-active-hover: #175400;
+  --color-interactive-control-active-active: #064700;
+  --color-interactive-contrast: #163300;
+  --color-interactive-contrast-hover: #214d00;
+  --color-interactive-contrast-hover-hover: #103c00;
+  --color-interactive-contrast-hover-active: #093000;
+  --color-interactive-contrast-active: #2c6600;
+  --color-interactive-contrast-active-hover: #175400;
+  --color-interactive-contrast-active-active: #064700;
+  --color-border-neutral: #ffffff33;
+  --color-border-overlay: #ffffff33;
+  --color-background-screen: #121511;
+  --color-background-screen-hover: #ffffff1a;
+  --color-background-screen-active: #ffffff33;
+  --color-background-elevated: #1e211d;
+  --color-background-neutral: #ffffff1a;
+  --color-background-neutral-hover: #ffffff33;
+  --color-background-neutral-active: #ffffff4d;
+  --color-background-overlay: #ffffff33;
+  --color-sentiment-negative: #ffbfbd;
+  --color-sentiment-negative-hover: #ffdcdb;
+  --color-sentiment-negative-active: #ffebeb;
+  --color-sentiment-positive: #a0e5ae;
+  --color-sentiment-warning: #edd272;
+  --color-contrast: #121511;
+  --color-light: #ffffff;
+  --color-dark: #121511;
+  --color-contrast-overlay: #121511;
+  --color-contrast-theme: #ffffff;
+  --padding-x-small: 8px;
+  --padding-small: 16px;
+  --padding-medium: 24px;
+  --padding-large: 32px;
+  --radius-full: 9999px;
+  --radius-small: 10px;
+  --radius-medium: 16px;
+  --radius-large: 24px;
+  --size-4: 4px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-52: 52px;
+  --size-56: 56px;
+  --size-60: 60px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-88: 88px;
+  --size-96: 96px;
+  --size-104: 104px;
+  --size-112: 112px;
+  --size-120: 120px;
+  --size-126: 126px;
+  --size-128: 128px;
+  --size-146: 146px;
+  --size-154: 154px;
+  --size-160: 160px;
+  --size-x-small: 24px;
+  --size-small: 32px;
+  --size-medium: 40px;
+  --size-large: 48px;
+  --size-x-large: 56px;
+  --size-2x-large: 72px;
+  --space-content-horizontal: 16px;
+  --space-small: 16px;
+  --space-medium: 32px;
+  --space-large: 40px;
+  --space-x-large: 56px;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-22: 1.375rem;
+  --font-size-24: 1.5rem;
+  --font-size-26: 1.625rem;
+  --font-size-28: 1.75rem;
+  --font-size-30: 1.875rem;
+  --font-size-32: 2rem;
+  --letter-spacing-xxs: 0.005em;
+  --letter-spacing-xs: 0.01em;
+  --letter-spacing-sm: 0.0125em;
+  --letter-spacing-md: 0.015em;
+  --letter-spacing-lg: 0.02em;
+  --letter-spacing-xl: 0.025em;
+  --letter-spacing-negative-xxs: -0.005em;
+  --letter-spacing-negative-xs: -0.01em;
+  --letter-spacing-negative-sm: -0.0125em;
+  --letter-spacing-negative-md: -0.015em;
+  --letter-spacing-negative-lg: -0.02em;
+  --letter-spacing-negative-xl: -0.025em;
+  --letter-spacing-negative-xxl: -0.03em;
+  --letter-spacing-negative-xxxl: -0.04em;
+  --letter-spacing-negative-xxxxl: -0.05em;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-30: 1.875rem;
+  --line-height-32: 2rem;
+  --line-height-34: 2.125rem;
+  --line-height-36: 2.25rem;
+  --line-height-42: 2.625rem;
+  --line-height-48: 3rem;
+  --line-height-title: 1.2;
+  --line-height-body: 1.5;
+  --line-height-control: 1.2;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
+}/**
+ * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
+ *
+ * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
+ */
+@media (max-width: 320px) {
+  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
+    --input-height-base: var(--size-32);
+    --input-height-large: var(--input-height-small);
+    --input-padding: var(--input-padding-small);
+    --input-padding-large: var(--input-padding-small);
+    --input-group-addon-padding: var(--input-group-addon-sm-padding);
+    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
+    --btn-height: var(--input-height-base);
+    --btn-lg-height: var(--btn-height);
+    --btn-sm-height: var(--btn-height);
+    --btn-padding: var(--input-padding);
+    --btn-sm-padding: var(--btn-padding);
+    --btn-lg-padding: var(--btn-padding);
+    --dropdown-link-padding: var(--size-12) var(--size-16);
+  }
+}