From 8e2a297210497b0455d64b0fa6a44852c50c46a0 Mon Sep 17 00:00:00 2001
From: ferreroltd <73488793+ferreroltd@users.noreply.github.com>
Date: Tue, 14 May 2024 14:51:24 +0100
Subject: [PATCH] chore: token sync (#2131)

---
 .changeset/itchy-dogs-melt.md                 |   5 +
 .../src/styles/tokens/contract.css.ts         | 110 ++++++++++++++----
 .../react-ui/src/styles/tokens/dark.css.ts    |  36 ++++--
 .../react-ui/src/styles/tokens/light.css.ts   |  36 ++++--
 4 files changed, 151 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/itchy-dogs-melt.md

diff --git a/.changeset/itchy-dogs-melt.md b/.changeset/itchy-dogs-melt.md
new file mode 100644
index 0000000000..ad188dce9f
--- /dev/null
+++ b/.changeset/itchy-dogs-melt.md
@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+Token sync
diff --git a/packages/libs/react-ui/src/styles/tokens/contract.css.ts b/packages/libs/react-ui/src/styles/tokens/contract.css.ts
index 371f6b5519..5f6263031c 100644
--- a/packages/libs/react-ui/src/styles/tokens/contract.css.ts
+++ b/packages/libs/react-ui/src/styles/tokens/contract.css.ts
@@ -367,6 +367,39 @@ export const tokens = createThemeContract({
          */
         n10: '',
       },
+      transition: {
+        delay: {
+          /**
+           * @light  `"0ms"`
+           * @dark  `"0ms"`
+           */
+          none: '',
+        },
+        duration: {
+          /**
+           * @light  `"400ms"`
+           * @dark  `"400ms"`
+           */
+          base: '',
+          /**
+           * @light  `"200ms"`
+           * @dark  `"200ms"`
+           */
+          d200: '',
+        },
+        animation: {
+          /**
+           * @light  `"tokens.kda.foundation.transition.duration.d200 tokens.kda.foundation.transition.delay.none cubic-bezier(0.61, 1, 0.88, 1)"`
+           * @dark  `"tokens.kda.foundation.transition.duration.d200 tokens.kda.foundation.transition.delay.none cubic-bezier(0.61, 1, 0.88, 1)"`
+           */
+          easeOutSine: '',
+          /**
+           * @light  `"tokens.kda.foundation.transition.duration.d200 tokens.kda.foundation.transition.delay.none cubic-bezier(0.33, 1, 0.68, 1)"`
+           * @dark  `"tokens.kda.foundation.transition.duration.d200 tokens.kda.foundation.transition.delay.none cubic-bezier(0.33, 1, 0.68, 1)"`
+           */
+          easeOutCubic: '',
+        },
+      },
       zIndex: {
         /**
          * @light  `"-99999"`
@@ -1786,6 +1819,15 @@ export const tokens = createThemeContract({
             black: '',
           },
         },
+        gradient: {
+          base: {
+            /**
+             * @light  `"tokens.kda.foundation.color.background.base.default 0.25%, tokens.kda.foundation.color.neutral.n1@alpha0 1%"`
+             * @dark  `"tokens.kda.foundation.color.background.base.default 0.25%, tokens.kda.foundation.color.neutral.n1@alpha0 1%"`
+             */
+            subtle: '',
+          },
+        },
         icon: {
           base: {
             /**
@@ -2470,6 +2512,12 @@ export const tokens = createThemeContract({
            * @dark  `"#ffffff"`
            */
           n100: '',
+          /**
+           * [generated]
+           * @light  `"#ffffff00"`
+           * @dark  `"#00000000"`
+           */
+          'n0@alpha0': '',
           /**
            * [generated]
            * @light  `"#ffffff1a"`
@@ -2512,6 +2560,12 @@ export const tokens = createThemeContract({
            * @dark  `"#000000f2"`
            */
           'n0@alpha95': '',
+          /**
+           * [generated]
+           * @light  `"#f5f5f500"`
+           * @dark  `"#020e1b00"`
+           */
+          'n1@alpha0': '',
           /**
            * [generated]
            * @light  `"#f5f5f503"`
@@ -2614,6 +2668,12 @@ export const tokens = createThemeContract({
            * @dark  `"#e4e5e5cc"`
            */
           'n95@alpha80': '',
+          /**
+           * [generated]
+           * @light  `"#020e1b00"`
+           * @dark  `"#f5f5f500"`
+           */
+          'n99@alpha0': '',
           /**
            * [generated]
            * @light  `"#020e1b03"`
@@ -2674,6 +2734,12 @@ export const tokens = createThemeContract({
            * @dark  `"#f5f5f5e6"`
            */
           'n99@alpha90': '',
+          /**
+           * [generated]
+           * @light  `"#00000000"`
+           * @dark  `"#ffffff00"`
+           */
+          'n100@alpha0': '',
           /**
            * [generated]
            * @light  `"#0000001a"`
@@ -4470,28 +4536,6 @@ export const tokens = createThemeContract({
           },
         },
       },
-      effect: {
-        shadow: {
-          /**
-           * This is the shadow 1 description
-           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           */
-          level1: '',
-          /**
-           * This is the shadow 2 description
-           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           */
-          level2: '',
-          /**
-           * This is the shadow 3 description updated
-           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           */
-          level3: '',
-        },
-      },
       icon: {
         size: {
           /**
@@ -4545,6 +4589,28 @@ export const tokens = createThemeContract({
           maxWidth: '',
         },
       },
+      effect: {
+        shadow: {
+          /**
+           * This is the shadow 1 description
+           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           */
+          level1: '',
+          /**
+           * This is the shadow 2 description
+           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           */
+          level2: '',
+          /**
+           * This is the shadow 3 description updated
+           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           */
+          level3: '',
+        },
+      },
       typography: {
         family: {
           /**
diff --git a/packages/libs/react-ui/src/styles/tokens/dark.css.ts b/packages/libs/react-ui/src/styles/tokens/dark.css.ts
index 6b12120a26..5dcf90da8d 100644
--- a/packages/libs/react-ui/src/styles/tokens/dark.css.ts
+++ b/packages/libs/react-ui/src/styles/tokens/dark.css.ts
@@ -87,6 +87,19 @@ export const darkThemeValues = {
         n9: tokens.kda.foundation.size.n9,
         n10: tokens.kda.foundation.size.n10,
       },
+      transition: {
+        delay: {
+          none: '0ms',
+        },
+        duration: {
+          base: '400ms',
+          d200: '200ms',
+        },
+        animation: {
+          easeOutSine: `${tokens.kda.foundation.transition.duration.d200} ${tokens.kda.foundation.transition.delay.none} cubic-bezier(0.61, 1, 0.88, 1)`,
+          easeOutCubic: `${tokens.kda.foundation.transition.duration.d200} ${tokens.kda.foundation.transition.delay.none} cubic-bezier(0.33, 1, 0.68, 1)`,
+        },
+      },
       zIndex: {
         deepdive: '-99999',
         default: '1',
@@ -482,6 +495,11 @@ export const darkThemeValues = {
             black: tokens.kda.foundation.color.neutral.n1,
           },
         },
+        gradient: {
+          base: {
+            subtle: `${tokens.kda.foundation.color.background.base.default} 0.25%, ${tokens.kda.foundation.color.neutral['n1@alpha0']} 1%`,
+          },
+        },
         icon: {
           base: {
             default: tokens.kda.foundation.color.neutral.n95,
@@ -664,6 +682,7 @@ export const darkThemeValues = {
           n95: '#e4e5e5',
           n99: '#f5f5f5',
           n100: '#ffffff',
+          'n0@alpha0': '#00000000',
           'n0@alpha10': '#0000001a',
           'n0@alpha20': '#00000033',
           'n0@alpha40': '#00000066',
@@ -671,6 +690,7 @@ export const darkThemeValues = {
           'n0@alpha80': '#000000cc',
           'n0@alpha90': '#000000e6',
           'n0@alpha95': '#000000f2',
+          'n1@alpha0': '#020e1b00',
           'n1@alpha1': '#020e1b03',
           'n1@alpha3': '#020e1b08',
           'n1@alpha6': '#020e1b0f',
@@ -688,6 +708,7 @@ export const darkThemeValues = {
           'n90@alpha20': '#d2d4d633',
           'n90@alpha25': '#d2d4d640',
           'n95@alpha80': '#e4e5e5cc',
+          'n99@alpha0': '#f5f5f500',
           'n99@alpha1': '#f5f5f503',
           'n99@alpha3': '#f5f5f508',
           'n99@alpha6': '#f5f5f50f',
@@ -698,6 +719,7 @@ export const darkThemeValues = {
           'n99@alpha50': '#f5f5f580',
           'n99@alpha80': '#f5f5f5cc',
           'n99@alpha90': '#f5f5f5e6',
+          'n100@alpha0': '#ffffff00',
           'n100@alpha10': '#ffffff1a',
           'n100@alpha20': '#ffffff33',
           'n100@alpha40': '#ffffff66',
@@ -1144,13 +1166,6 @@ export const darkThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1168,6 +1183,13 @@ export const darkThemeValues = {
           maxWidth: '42.5rem',
         },
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
       typography: {
         family: {
           primaryFont: 'Kadena Space Grotesk',
diff --git a/packages/libs/react-ui/src/styles/tokens/light.css.ts b/packages/libs/react-ui/src/styles/tokens/light.css.ts
index 3f6c9e913a..25e3b18a4a 100644
--- a/packages/libs/react-ui/src/styles/tokens/light.css.ts
+++ b/packages/libs/react-ui/src/styles/tokens/light.css.ts
@@ -87,6 +87,19 @@ export const lightThemeValues = {
         n9: tokens.kda.foundation.size.n9,
         n10: tokens.kda.foundation.size.n10,
       },
+      transition: {
+        delay: {
+          none: '0ms',
+        },
+        duration: {
+          base: '400ms',
+          d200: '200ms',
+        },
+        animation: {
+          easeOutSine: `${tokens.kda.foundation.transition.duration.d200} ${tokens.kda.foundation.transition.delay.none} cubic-bezier(0.61, 1, 0.88, 1)`,
+          easeOutCubic: `${tokens.kda.foundation.transition.duration.d200} ${tokens.kda.foundation.transition.delay.none} cubic-bezier(0.33, 1, 0.68, 1)`,
+        },
+      },
       zIndex: {
         deepdive: '-99999',
         default: '1',
@@ -482,6 +495,11 @@ export const lightThemeValues = {
             black: tokens.kda.foundation.color.neutral.n99,
           },
         },
+        gradient: {
+          base: {
+            subtle: `${tokens.kda.foundation.color.background.base.default} 0.25%, ${tokens.kda.foundation.color.neutral['n1@alpha0']} 1%`,
+          },
+        },
         icon: {
           base: {
             default: tokens.kda.foundation.color.neutral.n95,
@@ -664,6 +682,7 @@ export const lightThemeValues = {
           n95: '#131e2b',
           n99: '#020e1b',
           n100: '#000000',
+          'n0@alpha0': '#ffffff00',
           'n0@alpha10': '#ffffff1a',
           'n0@alpha20': '#ffffff33',
           'n0@alpha40': '#ffffff66',
@@ -671,6 +690,7 @@ export const lightThemeValues = {
           'n0@alpha80': '#ffffffcc',
           'n0@alpha90': '#ffffffe6',
           'n0@alpha95': '#fffffff2',
+          'n1@alpha0': '#f5f5f500',
           'n1@alpha1': '#f5f5f503',
           'n1@alpha3': '#f5f5f508',
           'n1@alpha6': '#f5f5f50f',
@@ -688,6 +708,7 @@ export const lightThemeValues = {
           'n90@alpha20': '#252f3a33',
           'n90@alpha25': '#252f3a40',
           'n95@alpha80': '#131e2bcc',
+          'n99@alpha0': '#020e1b00',
           'n99@alpha1': '#020e1b03',
           'n99@alpha3': '#020e1b08',
           'n99@alpha6': '#020e1b0f',
@@ -698,6 +719,7 @@ export const lightThemeValues = {
           'n99@alpha50': '#020e1b80',
           'n99@alpha80': '#020e1bcc',
           'n99@alpha90': '#020e1be6',
+          'n100@alpha0': '#00000000',
           'n100@alpha10': '#0000001a',
           'n100@alpha20': '#00000033',
           'n100@alpha40': '#00000066',
@@ -1144,13 +1166,6 @@ export const lightThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1168,6 +1183,13 @@ export const lightThemeValues = {
           maxWidth: '42.5rem',
         },
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
       typography: {
         family: {
           primaryFont: 'Kadena Space Grotesk',