Skip to content

Commit

Permalink
chore: token sync (#2131)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ferreroltd
ferreroltd committed May 14, 2024
1 parent d79818e commit 8e2a297
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 36 deletions.
5 changes: 5 additions & 0 deletions .changeset/itchy-dogs-melt.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@kadena/react-ui": patch
---

Token sync
110 changes: 88 additions & 22 deletions packages/libs/react-ui/src/styles/tokens/contract.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"`
Expand Down Expand Up @@ -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: {
/**
Expand Down Expand Up @@ -2470,6 +2512,12 @@ export const tokens = createThemeContract({
* @dark `"#ffffff"`
*/
n100: '',
/**
* [generated]
* @light `"#ffffff00"`
* @dark `"#00000000"`
*/
'n0@alpha0': '',
/**
* [generated]
* @light `"#ffffff1a"`
Expand Down Expand Up @@ -2512,6 +2560,12 @@ export const tokens = createThemeContract({
* @dark `"#000000f2"`
*/
'n0@alpha95': '',
/**
* [generated]
* @light `"#f5f5f500"`
* @dark `"#020e1b00"`
*/
'n1@alpha0': '',
/**
* [generated]
* @light `"#f5f5f503"`
Expand Down Expand Up @@ -2614,6 +2668,12 @@ export const tokens = createThemeContract({
* @dark `"#e4e5e5cc"`
*/
'n95@alpha80': '',
/**
* [generated]
* @light `"#020e1b00"`
* @dark `"#f5f5f500"`
*/
'n99@alpha0': '',
/**
* [generated]
* @light `"#020e1b03"`
Expand Down Expand Up @@ -2674,6 +2734,12 @@ export const tokens = createThemeContract({
* @dark `"#f5f5f5e6"`
*/
'n99@alpha90': '',
/**
* [generated]
* @light `"#00000000"`
* @dark `"#ffffff00"`
*/
'n100@alpha0': '',
/**
* [generated]
* @light `"#0000001a"`
Expand Down Expand Up @@ -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: {
/**
Expand Down Expand Up @@ -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: {
/**
Expand Down
36 changes: 29 additions & 7 deletions packages/libs/react-ui/src/styles/tokens/dark.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -664,13 +682,15 @@ export const darkThemeValues = {
n95: '#e4e5e5',
n99: '#f5f5f5',
n100: '#ffffff',
'n0@alpha0': '#00000000',
'n0@alpha10': '#0000001a',
'n0@alpha20': '#00000033',
'n0@alpha40': '#00000066',
'n0@alpha70': '#000000b3',
'n0@alpha80': '#000000cc',
'n0@alpha90': '#000000e6',
'n0@alpha95': '#000000f2',
'n1@alpha0': '#020e1b00',
'n1@alpha1': '#020e1b03',
'n1@alpha3': '#020e1b08',
'n1@alpha6': '#020e1b0f',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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',
Expand Down
36 changes: 29 additions & 7 deletions packages/libs/react-ui/src/styles/tokens/light.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -664,13 +682,15 @@ export const lightThemeValues = {
n95: '#131e2b',
n99: '#020e1b',
n100: '#000000',
'n0@alpha0': '#ffffff00',
'n0@alpha10': '#ffffff1a',
'n0@alpha20': '#ffffff33',
'n0@alpha40': '#ffffff66',
'n0@alpha70': '#ffffffb3',
'n0@alpha80': '#ffffffcc',
'n0@alpha90': '#ffffffe6',
'n0@alpha95': '#fffffff2',
'n1@alpha0': '#f5f5f500',
'n1@alpha1': '#f5f5f503',
'n1@alpha3': '#f5f5f508',
'n1@alpha6': '#f5f5f50f',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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',
Expand Down

0 comments on commit 8e2a297

Please sign in to comment.