Update primaryFont and secondaryFont to Inter (#2479)

kadena-community · Aug 26, 2024 · a5db08b · a5db08b
1 parent 2dbe962
commit a5db08b
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 131 deletions.
diff --git a/.changeset/slow-windows-suffer.md b/.changeset/slow-windows-suffer.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': patch
+---
+
+Updated primaryFont and secondaryFont to Inter
diff --git a/packages/libs/kode-ui/src/styles/global.css.ts b/packages/libs/kode-ui/src/styles/global.css.ts
@@ -1,34 +1,40 @@
 // NOTE: Refer to https://www.joshwcomeau.com/css/custom-css-reset/ for more detailed explanation
 import { globalFontFace } from '@vanilla-extract/css';
 import { globalStyle } from '../styles';
-import { breakpoints } from './themeUtils';
-import { monospaceFont, primaryFont, secondaryFont, vars } from './vars.css';
+import { lightThemeValues } from './tokens/light.css';
 
+// eslint-disable-next-line @kadena-dev/typedef-var
+export const primaryFont =
+  lightThemeValues.kda.foundation.typography.family.primaryFont;
+export const secondaryFont =
+  lightThemeValues.kda.foundation.typography.family.secondaryFont;
+export const monospaceFont =
+  lightThemeValues.kda.foundation.typography.family.monospaceFont;
+
+// Inter
 globalFontFace(primaryFont, {
   fontStyle: 'normal',
   fontWeight: '300, 700',
   fontDisplay: 'swap',
-  src: `url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2) format('woff2')`,
+  src: `url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2')`,
   unicodeRange: `U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB`,
 });
-
 globalFontFace(primaryFont, {
   fontStyle: 'normal',
   fontWeight: '300, 700',
   fontDisplay: 'swap',
-  src: `url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2')`,
+  src: `url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2')`,
   unicodeRange: `U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF`,
 });
-
 globalFontFace(primaryFont, {
   fontStyle: 'normal',
   fontWeight: '300, 700',
   fontDisplay: 'swap',
-  src: `url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2')`,
+  src: `url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2')`,
   unicodeRange: `U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD`,
 });
 
-// TODO: add inter font
+// Inter
 globalFontFace(secondaryFont, {
   fontWeight: '300, 700',
   src: "url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2')",
@@ -70,7 +76,7 @@ globalStyle('*', {
 */
 globalStyle('html, body', {
   height: '100%',
-  fontFamily: vars.fonts.$main,
+  fontFamily: primaryFont,
 });
 
 /*
@@ -98,7 +104,7 @@ globalStyle('img, picture, video, canvas', {
     7. Remove built-in form typography styles
 */
 globalStyle('button, input, select, textarea, label', {
-  fontFamily: vars.fonts.$main,
+  fontFamily: primaryFont,
 });
 
 /*
@@ -111,7 +117,7 @@ globalStyle('p, h1, h2, h3, h4, h5, h6, span, li', {
 globalStyle(
   '#storybook-docs p, #storybook-docs h1, #storybook-docs h2, #storybook-docs h3, #storybook-docs h4, #storybook-docs h5, #storybook-docs h6, #storybook-docs span, #storybook-docs li',
   {
-    fontFamily: `${vars.fonts.$main} !important`,
+    fontFamily: `${primaryFont} !important`,
   },
 );
 
@@ -121,46 +127,3 @@ globalStyle(
 globalStyle('#root, #__next', {
   isolation: 'isolate',
 });
-
-/*
-    10. Kode Design System
-*/
-globalStyle(':root', {
-  vars: {
-    '--spacing-2xs': vars.sizes.$1,
-    '--spacing-xs': vars.sizes.$2,
-    '--spacing-sm': vars.sizes.$3,
-    '--spacing-md': vars.sizes.$4,
-    '--spacing-lg': vars.sizes.$6,
-    '--spacing-xl': vars.sizes.$7,
-    '--spacing-2xl': vars.sizes.$9,
-    '--spacing-3xl': vars.sizes.$10,
-  },
-  '@media': {
-    [breakpoints.md]: {
-      vars: {
-        '--spacing-3xl': vars.sizes.$12,
-      },
-    },
-    [breakpoints.lg]: {
-      vars: {
-        '--spacing-2xl': vars.sizes.$10,
-        '--spacing-3xl': vars.sizes.$15,
-      },
-    },
-    [breakpoints.xl]: {
-      vars: {
-        '--spacing-xl': vars.sizes.$8,
-        '--spacing-2xl': vars.sizes.$13,
-        '--spacing-3xl': vars.sizes.$20,
-      },
-    },
-    [breakpoints.xxl]: {
-      vars: {
-        '--spacing-xl': vars.sizes.$11,
-        '--spacing-2xl': vars.sizes.$17,
-        '--spacing-3xl': vars.sizes.$25,
-      },
-    },
-  },
-});
diff --git a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
@@ -688,28 +688,6 @@ export const tokens = createThemeContract({
          */
         toast: '',
       },
-      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: '',
-        },
-      },
       color: {
         accent: {
           /**
@@ -4896,6 +4874,42 @@ 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: '',
+        },
+      },
+      layout: {
+        content: {
+          /**
+           * @light  `"33.75rem"`
+           * @dark  `"33.75rem"`
+           */
+          minWidth: '',
+          /**
+           * @light  `"42.5rem"`
+           * @dark  `"42.5rem"`
+           */
+          maxWidth: '',
+        },
+      },
       icon: {
         size: {
           /**
@@ -4935,30 +4949,16 @@ export const tokens = createThemeContract({
           xxl: '',
         },
       },
-      layout: {
-        content: {
-          /**
-           * @light  `"33.75rem"`
-           * @dark  `"33.75rem"`
-           */
-          minWidth: '',
-          /**
-           * @light  `"42.5rem"`
-           * @dark  `"42.5rem"`
-           */
-          maxWidth: '',
-        },
-      },
       typography: {
         family: {
           /**
-           * @light  `"Kadena Space Grotesk"`
-           * @dark  `"Kadena Space Grotesk"`
+           * @light  `"Inter"`
+           * @dark  `"Inter"`
            */
           primaryFont: '',
           /**
-           * @light  `"Haas Grot Disp"`
-           * @dark  `"Haas Grot Disp"`
+           * @light  `"Inter"`
+           * @dark  `"Inter"`
            */
           secondaryFont: '',
           /**

diff --git a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
@@ -188,13 +188,6 @@ export const darkThemeValues = {
         sticky: '100',
         toast: '10000',
       },
-      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`,
-        },
-      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -1277,6 +1270,19 @@ 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`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1288,16 +1294,10 @@ export const darkThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
-          primaryFont: 'Kadena Space Grotesk',
-          secondaryFont: 'Haas Grot Disp',
+          primaryFont: 'Inter',
+          secondaryFont: 'Inter',
           monospaceFont: 'Kode Mono',
         },
         fontSize: {

diff --git a/packages/libs/kode-ui/src/styles/tokens/light.css.ts b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
@@ -188,13 +188,6 @@ export const lightThemeValues = {
         sticky: '100',
         toast: '10000',
       },
-      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`,
-        },
-      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -1277,6 +1270,19 @@ 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`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1288,16 +1294,10 @@ export const lightThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
-          primaryFont: 'Kadena Space Grotesk',
-          secondaryFont: 'Haas Grot Disp',
+          primaryFont: 'Inter',
+          secondaryFont: 'Inter',
           monospaceFont: 'Kode Mono',
         },
         fontSize: {

diff --git a/packages/libs/kode-ui/src/styles/vars.css.ts b/packages/libs/kode-ui/src/styles/vars.css.ts
@@ -4,17 +4,11 @@ import {
   createThemeContract,
 } from '@vanilla-extract/css';
 import { colorPalette, gradients, hexToRgba } from './colors';
+import { primaryFont } from './global.css';
 import { tokens } from './tokens/contract.css';
 import { darkThemeValues } from './tokens/dark.css';
 import { lightThemeValues } from './tokens/light.css';
 
-// eslint-disable-next-line @kadena-dev/typedef-var
-export const primaryFont =
-  lightThemeValues.kda.foundation.typography.family.primaryFont;
-export const secondaryFont =
-  lightThemeValues.kda.foundation.typography.family.secondaryFont;
-export const monospaceFont =
-  lightThemeValues.kda.foundation.typography.family.monospaceFont;
 // eslint-disable-next-line @kadena-dev/typedef-var
 const oldThemeValues = {
   fonts: {