🚀 feat: create new theme

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
       { blankLine: 'always', prev: 'directive', next: '*' },
       { blankLine: 'any', prev: 'directive', next: 'directive' },
     ],
+    'import/no-named-as-default': 0,
   },
   globals: {
     window: true,

packages/doc/gatsby-config.js

@@ -64,7 +64,10 @@ const plugins = [
     resolve: `gatsby-plugin-web-font-loader`,
     options: {
       google: {
-        families: ['Rubik:300,400,500,700,900,300i,400i,500i,700i,900i'],
+        families: [
+          'Rubik:300,400,500,700,900,300i,400i,500i,700i,900i',
+          'Inter:300,400,500,700,800,900,300i,400i,500i,700i,800i,900i',
+        ],
       },
     },
   },

packages/doc/src/components/CodeBlock/ReactLive/ReactLive.jsx

@@ -44,10 +44,11 @@ const Component = styled.div`
     theme: {
       yoga: {
         colors: { white, text, primary },
+        baseFont,
       },
     },
   }) => `
-    font-family: 'Rubik';
+    font-family: ${baseFont.family};
     padding: 50px;
     background-color: ${darkMode ? text.primary : white};
     transition: all 0.3s ease-in-out;

packages/tokens/src/global/colors.ts

@@ -2,31 +2,46 @@
 
 const vibin = '#D8385E';
 const hope = '#1D856C';
+const hopeNew = '#0C8046';
 const energy = '#FFC24C';
 const relax = '#5340C9';
+const relaxNew = '#A880FF';
+const neon = '#DCFF79';
+const sand = '#FBF8EC';
 
 // Brand colors ↓
 
 const peace = '#FFB0A7';
+const peaceNew = '#FFEBF1';
 const verve = '#CA4808';
 const brandingVerve = '#FF874C';
 const uplift = '#FF4438';
+const upliftNew = '#D8385E';
 const deepPurple = '#710252';
+const deepPurpleNew = '#590931';
 const yoga = '#FFEEF2';
 
 // Feedback ↓
 
 const success = '#C1EEDB';
+const successNew = '#E3EFC3';
 const neutral = '#E0DFFF';
+const neutralNew = '#EAE0FF';
 const attention = '#FCD6C3';
 
 // Gray scale ↓
 
 const stamina = '#231B22';
+const staminaNew = '#1D1D1F';
 const deep = '#6B6B78';
+const deepNew = '#57544D';
 const medium = '#9898A6';
+const mediumNew = '#A6A298';
 const light = '#D7D7E0';
+const lightNew = '#E1DED7';
+const lightest = '#EFEDE7';
 const clear = '#F5F5FA';
+const clearNew = '#FAF9F5';
 const white = '#FFFFFF';
 
 const colors = {
@@ -49,6 +64,23 @@ const colors = {
   light,
   clear,
   white,
+
+  // New Colors
+  hopeNew,
+  relaxNew,
+  neon,
+  sand,
+  peaceNew,
+  upliftNew,
+  deepPurpleNew,
+  successNew,
+  neutralNew,
+  staminaNew,
+  deepNew,
+  mediumNew,
+  lightNew,
+  lightest,
+  clearNew,
 } as const;
 
 export default colors;

packages/tokens/src/global/font-weights.ts

@@ -4,9 +4,12 @@ export const weights = {
   medium: 500,
   bold: 700,
   black: 900,
+  regularNew: 500,
+  mediumNew: 700,
+  boldNew: 800,
 } as const;
 
-const fontWeights = {...weights, ...Object.values(weights)};
+const fontWeights = { ...weights, ...Object.values(weights) };
 
 export type FontWeights = Partial<typeof fontWeights>;
 

packages/tokens/src/global/fonts.ts

@@ -7,14 +7,20 @@ export interface Font {
 
 export interface Fonts {
   rubik?: Font;
+  inter?: Font;
 }
 
 const fontWeights = Object.values(weights);
+const weight = [...fontWeights, ...fontWeights.map(value => `${value}i`)];
 
 const fonts: Fonts = {
   rubik: {
     family: 'Rubik',
-    weight: [...fontWeights, ...fontWeights.map(value => `${value}i`)],
+    weight,
+  },
+  inter: {
+    family: 'Inter',
+    weight,
   },
 };
 

packages/yoga/src/Theme/Provider/web/FontLoader.jsx

@@ -8,17 +8,21 @@ const FontLoader = ({
       baseFont: { family, weight },
     },
   },
-}) => (
-  <>
-    {typeof window !== 'undefined' ? (
-      <GoogleFontLoader fonts={[{ font: family, weights: weight }]} />
-    ) : (
-      <link
-        rel="stylesheet"
-        href={`https://fonts.googleapis.com/css?family=${family}:${weight.join()}`}
-      />
-    )}
-  </>
-);
+}) => {
+  const uniqueWeights = [...new Set(weight)];
+
+  return (
+    <>
+      {typeof window !== 'undefined' ? (
+        <GoogleFontLoader fonts={[{ font: family, weights: uniqueWeights }]} />
+      ) : (
+        <link
+          rel="stylesheet"
+          href={`https://fonts.googleapis.com/css?family=${family}:${uniqueWeights.join()}`}
+        />
+      )}
+    </>
+  );
+};
 
 export default withTheme(FontLoader);

packages/yoga/src/Theme/Provider/web/FontLoader.test.jsx

@@ -14,7 +14,7 @@ describe('FontLoader component', () => {
     const link = document.getElementsByTagName('link').item(0).outerHTML;
 
     expect(link).toContain(
-      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900,300i,400i,500i,700i,900i">`,
+      `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900,800,300i,400i,500i,700i,900i,800i">`,
     );
   });
 });

packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.js → packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.ts

@@ -1,9 +1,14 @@
+import YogaTokens from '../../../../../tokens';
+
+type ThemeVars = {
+  (tokens: typeof YogaTokens): {};
+  isFromThemeBuilder?: boolean;
+};
+
 /**
  * Gets a function that one could sent to \<ThemeProvider> in order to inject a custom thme (or sets of tokens)
- * @param {themeVars} themeVars - should return an object with a similar scheme of our tokens that will be replaced, can receive a tokens parameter
- * @returns {themeVars} themeVars - will return the same function which is injected to \<ThemeProvider>
  */
-function createTheme(themeVars) {
+function createTheme(themeVars: ThemeVars) {
   if (typeof themeVars !== 'function')
     throw new TypeError(
       `Invalid param 'themeVars', expected 'function', received '${typeof themeVars}'.`,
@@ -18,8 +23,5 @@ function createTheme(themeVars) {
 
 /**
  * This callback is displayed as part of the Requester class.
- * @callback themeVars
- * @param {Object.<string, string | number>} tokens - object containing Yoga tokens
  */
-
 export default createTheme;

packages/yoga/src/Theme/index.js

@@ -1,6 +1,8 @@
 import { ThemeProvider, FontLoader } from './Provider';
-import yogaTheme from './theme';
+import yogaTheme, { v3theme } from './theme';
 import theme from './helpers/themeReader';
 import createTheme from './helpers/themeGenerator';
 
-export { ThemeProvider as default, FontLoader, yogaTheme, theme, createTheme };
+export { ThemeProvider, FontLoader, yogaTheme, theme, createTheme, v3theme };
+
+export default ThemeProvider;

packages/yoga/src/Theme/index.native.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-named-as-default
 import ThemeProvider from './Provider';
-import yogaTheme from './theme';
+import yogaTheme, { v3theme } from './theme';
 import theme from './helpers/themeReader';
 import createTheme from './helpers/themeGenerator';
 
-export { ThemeProvider as default, yogaTheme, theme, createTheme };
+export { ThemeProvider as default, yogaTheme, theme, createTheme, v3theme };

packages/yoga/src/Theme/theme/index.js

@@ -1,3 +1,5 @@
 import theme from './theme';
 
+export { v3theme } from './v3theme';
+
 export default theme;

packages/yoga/src/Theme/theme/v3theme.ts

@@ -0,0 +1,58 @@
+import createTheme from '../helpers/themeGenerator';
+
+export const v3theme = createTheme(tokens => ({
+  colors: {
+    secondary: tokens.colors.staminaNew,
+
+    deep: tokens.colors.deepNew,
+    hope: tokens.colors.hopeNew,
+    light: tokens.colors.lightNew,
+    clear: tokens.colors.clearNew,
+    peace: tokens.colors.peaceNew,
+    relax: tokens.colors.relaxNew,
+    medium: tokens.colors.mediumNew,
+    uplift: tokens.colors.upliftNew,
+    stamina: tokens.colors.staminaNew,
+    success: tokens.colors.successNew,
+    neutral: tokens.colors.neutralNew,
+    deepPurple: tokens.colors.deepPurpleNew,
+
+    feedback: {
+      success: {
+        ...[tokens.colors.successNew, tokens.colors.hopeNew],
+        light: tokens.colors.successNew,
+        dark: tokens.colors.hopeNew,
+      },
+      informative: {
+        ...[tokens.colors.neutralNew, tokens.colors.relaxNew],
+        light: tokens.colors.neutralNew,
+        dark: tokens.colors.relaxNew,
+      },
+      neutral: {
+        ...[tokens.colors.lightNew, tokens.colors.mediumNew],
+        light: tokens.colors.lightNew,
+        dark: tokens.colors.mediumNew,
+      },
+    },
+
+    text: {
+      primary: tokens.colors.staminaNew,
+      secondary: tokens.colors.deepNew,
+      disabled: tokens.colors.lightNew,
+    },
+
+    elements: {
+      selectionAndIcons: tokens.colors.mediumNew,
+      lineAndBorders: tokens.colors.lightest,
+      backgroundAndDisabled: tokens.colors.clearNew,
+    },
+  },
+
+  baseFont: tokens.fonts.inter,
+
+  fontWeights: {
+    regular: tokens.fontWeights.regularNew,
+    medium: tokens.fontWeights.mediumNew,
+    bold: tokens.fontWeights.boldNew,
+  },
+}));

packages/yoga/src/index.native.js

@@ -1,4 +1,4 @@
-import ThemeProvider, { yogaTheme, theme, createTheme } from './Theme';
+import ThemeProvider, { yogaTheme, theme, createTheme, v3theme } from './Theme';
 import Button from './Button';
 import List from './List';
 import Checkbox from './Checkbox';
@@ -29,6 +29,7 @@ export {
   yogaTheme,
   createTheme,
   theme,
+  v3theme,
   Button,
   List,
   Checkbox,

packages/yoga/src/index.ts

@@ -3,6 +3,7 @@ import ThemeProvider, {
   yogaTheme,
   theme,
   createTheme,
+  v3theme,
 } from './Theme';
 import Accordion from './Accordion';
 import Button from './Button';
@@ -49,6 +50,7 @@ export {
   createTheme,
   yogaTheme,
   theme,
+  v3theme,
   Button,
   List,
   Checkbox,