diff --git a/.eslintrc.js b/.eslintrc.js index 628a8eced5..126cc22188 100644 --- a/.eslintrc.js +++ b/.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, diff --git a/packages/doc/gatsby-config.js b/packages/doc/gatsby-config.js index de0f7e8a5c..264f02bc2d 100755 --- a/packages/doc/gatsby-config.js +++ b/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', + ], }, }, }, diff --git a/packages/doc/src/components/CodeBlock/ReactLive/ReactLive.jsx b/packages/doc/src/components/CodeBlock/ReactLive/ReactLive.jsx index d23a4674a9..f016519ee5 100644 --- a/packages/doc/src/components/CodeBlock/ReactLive/ReactLive.jsx +++ b/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; diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter-300.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter-300.ttf new file mode 100644 index 0000000000..71188f5cb2 Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter-300.ttf differ diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter-500.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter-500.ttf new file mode 100644 index 0000000000..a01f3777a6 Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter-500.ttf differ diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter-700.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter-700.ttf new file mode 100644 index 0000000000..fe23eeb9c9 Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter-700.ttf differ diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter-800.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter-800.ttf new file mode 100644 index 0000000000..874b1b0dd7 Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter-800.ttf differ diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter-900.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter-900.ttf new file mode 100644 index 0000000000..b27822baea Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter-900.ttf differ diff --git a/packages/labnative/android/app/src/main/assets/fonts/Inter.ttf b/packages/labnative/android/app/src/main/assets/fonts/Inter.ttf new file mode 100644 index 0000000000..5e4851f0ab Binary files /dev/null and b/packages/labnative/android/app/src/main/assets/fonts/Inter.ttf differ diff --git a/packages/labnative/android/link-assets-manifest.json b/packages/labnative/android/link-assets-manifest.json new file mode 100644 index 0000000000..00aebf38c3 --- /dev/null +++ b/packages/labnative/android/link-assets-manifest.json @@ -0,0 +1,69 @@ +{ + "migIndex": 1, + "data": [ + { + "path": "../yoga/src/Fonts/Inter-300.ttf", + "sha1": "cbb2506d8da21edbb2dc8cfa26e3b42a97d138f8" + }, + { + "path": "../yoga/src/Fonts/Inter-500.ttf", + "sha1": "e76f580811e031813e7150131a0724811cdd737a" + }, + { + "path": "../yoga/src/Fonts/Inter-700.ttf", + "sha1": "47ff07c75746682133b81e7ac0537ce50a4c9916" + }, + { + "path": "../yoga/src/Fonts/Inter-800.ttf", + "sha1": "c9b3d2f2449ab2c67ff075f806973fa3d7e104b3" + }, + { + "path": "../yoga/src/Fonts/Inter-900.ttf", + "sha1": "f79fa58ace5f55e338c99bf71e7e0702841df6f2" + }, + { + "path": "../yoga/src/Fonts/Inter.ttf", + "sha1": "cfa780d0b50b2bb7eacb82984f1b18a95aaa40c5" + }, + { + "path": "../yoga/src/Fonts/Rubik-300-italic.ttf", + "sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec" + }, + { + "path": "../yoga/src/Fonts/Rubik-300.ttf", + "sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b" + }, + { + "path": "../yoga/src/Fonts/Rubik-500-italic.ttf", + "sha1": "61761978e3bfdd077f9799d2e491306ec205c869" + }, + { + "path": "../yoga/src/Fonts/Rubik-500.ttf", + "sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea" + }, + { + "path": "../yoga/src/Fonts/Rubik-700-italic.ttf", + "sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91" + }, + { + "path": "../yoga/src/Fonts/Rubik-700.ttf", + "sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f" + }, + { + "path": "../yoga/src/Fonts/Rubik-900-italic.ttf", + "sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba" + }, + { + "path": "../yoga/src/Fonts/Rubik-900.ttf", + "sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb" + }, + { + "path": "../yoga/src/Fonts/Rubik-italic.ttf", + "sha1": "2c0bc181562295cba66d1e23da977237324ca5fc" + }, + { + "path": "../yoga/src/Fonts/Rubik.ttf", + "sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b" + } + ] +} diff --git a/packages/labnative/ios/labnative.xcodeproj/project.pbxproj b/packages/labnative/ios/labnative.xcodeproj/project.pbxproj index ec833e9ec7..cb44a6f2b4 100644 --- a/packages/labnative/ios/labnative.xcodeproj/project.pbxproj +++ b/packages/labnative/ios/labnative.xcodeproj/project.pbxproj @@ -24,6 +24,12 @@ 9E6F0E36A9004A42B8D6A267 /* Rubik-300-italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E6CA68BCC2D64A3EA119626B /* Rubik-300-italic.ttf */; }; BD0D3E5A2407B2895E1F8661 /* libPods-labnative-labnativeTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6AA843BE336E44886F15181E /* libPods-labnative-labnativeTests.a */; }; E7BF20989ECD4FB5BF3AF1DD /* Rubik.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 33F58296D36345399CBC36B3 /* Rubik.ttf */; }; + 2994EDDF64974357A27EAAC3 /* Inter-300.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FEAAFA6597B941818987D1C6 /* Inter-300.ttf */; }; + FF3E4C0FA85048EFA8EA16A6 /* Inter-500.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 20E6F91CA99041E688FE02A2 /* Inter-500.ttf */; }; + AA20D33B2EC244D7BB333672 /* Inter-700.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */; }; + 7F730649CB494993969CCFCE /* Inter-800.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C6C91200DE044F5695E3C07B /* Inter-800.ttf */; }; + D66B574DAD2D485D9BB12FA5 /* Inter-900.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E96AA66128D242B09DD38E14 /* Inter-900.ttf */; }; + 748931469D5D48638537FBF5 /* Inter.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -68,6 +74,12 @@ EB741C2FCFAC5D1D17A9D9C4 /* Pods-labnative-labnativeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-labnative-labnativeTests.debug.xcconfig"; path = "Target Support Files/Pods-labnative-labnativeTests/Pods-labnative-labnativeTests.debug.xcconfig"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; FEA77756AD892BAB079640ED /* Pods-labnativeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-labnativeTests.debug.xcconfig"; path = "Target Support Files/Pods-labnativeTests/Pods-labnativeTests.debug.xcconfig"; sourceTree = ""; }; + FEAAFA6597B941818987D1C6 /* Inter-300.ttf */ = {isa = PBXFileReference; name = "Inter-300.ttf"; path = "../../yoga/src/Fonts/Inter-300.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 20E6F91CA99041E688FE02A2 /* Inter-500.ttf */ = {isa = PBXFileReference; name = "Inter-500.ttf"; path = "../../yoga/src/Fonts/Inter-500.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */ = {isa = PBXFileReference; name = "Inter-700.ttf"; path = "../../yoga/src/Fonts/Inter-700.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + C6C91200DE044F5695E3C07B /* Inter-800.ttf */ = {isa = PBXFileReference; name = "Inter-800.ttf"; path = "../../yoga/src/Fonts/Inter-800.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + E96AA66128D242B09DD38E14 /* Inter-900.ttf */ = {isa = PBXFileReference; name = "Inter-900.ttf"; path = "../../yoga/src/Fonts/Inter-900.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */ = {isa = PBXFileReference; name = "Inter.ttf"; path = "../../yoga/src/Fonts/Inter.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -145,6 +157,12 @@ 53B7F739796943F5AD63E19F /* Rubik-900.ttf */, C41A3A5FEDC7439BA430B6D7 /* Rubik-italic.ttf */, 33F58296D36345399CBC36B3 /* Rubik.ttf */, + FEAAFA6597B941818987D1C6 /* Inter-300.ttf */, + 20E6F91CA99041E688FE02A2 /* Inter-500.ttf */, + 2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */, + C6C91200DE044F5695E3C07B /* Inter-800.ttf */, + E96AA66128D242B09DD38E14 /* Inter-900.ttf */, + DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */, ); name = Resources; sourceTree = ""; @@ -302,6 +320,12 @@ 1251CB04BB5F4A67A17BB04E /* Rubik-900.ttf in Resources */, 9C3432F47B0348A8B355EFD9 /* Rubik-italic.ttf in Resources */, E7BF20989ECD4FB5BF3AF1DD /* Rubik.ttf in Resources */, + 2994EDDF64974357A27EAAC3 /* Inter-300.ttf in Resources */, + FF3E4C0FA85048EFA8EA16A6 /* Inter-500.ttf in Resources */, + AA20D33B2EC244D7BB333672 /* Inter-700.ttf in Resources */, + 7F730649CB494993969CCFCE /* Inter-800.ttf in Resources */, + D66B574DAD2D485D9BB12FA5 /* Inter-900.ttf in Resources */, + 748931469D5D48638537FBF5 /* Inter.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/packages/labnative/ios/labnative/Info.plist b/packages/labnative/ios/labnative/Info.plist index 5738c270fa..4072a7700f 100644 --- a/packages/labnative/ios/labnative/Info.plist +++ b/packages/labnative/ios/labnative/Info.plist @@ -16,12 +16,12 @@ $(PRODUCT_NAME) CFBundlePackageType APPL - CFBundleShortVersionString - $(MARKETING_VERSION) + CFBundleShortVersionString + $(MARKETING_VERSION) CFBundleSignature ???? - CFBundleVersion - $(CURRENT_PROJECT_VERSION) + CFBundleVersion + $(CURRENT_PROJECT_VERSION) LSRequiresIPhoneOS NSAppTransportSecurity @@ -65,6 +65,12 @@ Rubik-900.ttf Rubik-italic.ttf Rubik.ttf + Inter-300.ttf + Inter-500.ttf + Inter-700.ttf + Inter-800.ttf + Inter-900.ttf + Inter.ttf diff --git a/packages/labnative/ios/link-assets-manifest.json b/packages/labnative/ios/link-assets-manifest.json new file mode 100644 index 0000000000..00aebf38c3 --- /dev/null +++ b/packages/labnative/ios/link-assets-manifest.json @@ -0,0 +1,69 @@ +{ + "migIndex": 1, + "data": [ + { + "path": "../yoga/src/Fonts/Inter-300.ttf", + "sha1": "cbb2506d8da21edbb2dc8cfa26e3b42a97d138f8" + }, + { + "path": "../yoga/src/Fonts/Inter-500.ttf", + "sha1": "e76f580811e031813e7150131a0724811cdd737a" + }, + { + "path": "../yoga/src/Fonts/Inter-700.ttf", + "sha1": "47ff07c75746682133b81e7ac0537ce50a4c9916" + }, + { + "path": "../yoga/src/Fonts/Inter-800.ttf", + "sha1": "c9b3d2f2449ab2c67ff075f806973fa3d7e104b3" + }, + { + "path": "../yoga/src/Fonts/Inter-900.ttf", + "sha1": "f79fa58ace5f55e338c99bf71e7e0702841df6f2" + }, + { + "path": "../yoga/src/Fonts/Inter.ttf", + "sha1": "cfa780d0b50b2bb7eacb82984f1b18a95aaa40c5" + }, + { + "path": "../yoga/src/Fonts/Rubik-300-italic.ttf", + "sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec" + }, + { + "path": "../yoga/src/Fonts/Rubik-300.ttf", + "sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b" + }, + { + "path": "../yoga/src/Fonts/Rubik-500-italic.ttf", + "sha1": "61761978e3bfdd077f9799d2e491306ec205c869" + }, + { + "path": "../yoga/src/Fonts/Rubik-500.ttf", + "sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea" + }, + { + "path": "../yoga/src/Fonts/Rubik-700-italic.ttf", + "sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91" + }, + { + "path": "../yoga/src/Fonts/Rubik-700.ttf", + "sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f" + }, + { + "path": "../yoga/src/Fonts/Rubik-900-italic.ttf", + "sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba" + }, + { + "path": "../yoga/src/Fonts/Rubik-900.ttf", + "sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb" + }, + { + "path": "../yoga/src/Fonts/Rubik-italic.ttf", + "sha1": "2c0bc181562295cba66d1e23da977237324ca5fc" + }, + { + "path": "../yoga/src/Fonts/Rubik.ttf", + "sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b" + } + ] +} diff --git a/packages/tokens/src/global/colors.ts b/packages/tokens/src/global/colors.ts index 743d1bd38d..b3e5621509 100644 --- a/packages/tokens/src/global/colors.ts +++ b/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; diff --git a/packages/tokens/src/global/font-weights.ts b/packages/tokens/src/global/font-weights.ts index 612ac75a41..0b3d7ae435 100644 --- a/packages/tokens/src/global/font-weights.ts +++ b/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; diff --git a/packages/tokens/src/global/fonts.ts b/packages/tokens/src/global/fonts.ts index 75c16cbac5..9579f06b14 100644 --- a/packages/tokens/src/global/fonts.ts +++ b/packages/tokens/src/global/fonts.ts @@ -1,20 +1,24 @@ import { weights } from './font-weights'; -export interface Font { - family: string; - weight: (number | string)[]; -} - -export interface Fonts { - rubik?: Font; -} - const fontWeights = Object.values(weights); +const weight = [ + ...fontWeights, + ...fontWeights.map(value => `${value}i` as const), +]; -const fonts: Fonts = { +type Font = { + family: string; + weight: typeof weight; +}; + +const fonts: Record = { rubik: { family: 'Rubik', - weight: [...fontWeights, ...fontWeights.map(value => `${value}i`)], + weight, + }, + inter: { + family: 'Inter', + weight, }, }; diff --git a/packages/yoga/src/Fonts/Inter-300.ttf b/packages/yoga/src/Fonts/Inter-300.ttf new file mode 100644 index 0000000000..71188f5cb2 Binary files /dev/null and b/packages/yoga/src/Fonts/Inter-300.ttf differ diff --git a/packages/yoga/src/Fonts/Inter-500.ttf b/packages/yoga/src/Fonts/Inter-500.ttf new file mode 100644 index 0000000000..a01f3777a6 Binary files /dev/null and b/packages/yoga/src/Fonts/Inter-500.ttf differ diff --git a/packages/yoga/src/Fonts/Inter-700.ttf b/packages/yoga/src/Fonts/Inter-700.ttf new file mode 100644 index 0000000000..fe23eeb9c9 Binary files /dev/null and b/packages/yoga/src/Fonts/Inter-700.ttf differ diff --git a/packages/yoga/src/Fonts/Inter-800.ttf b/packages/yoga/src/Fonts/Inter-800.ttf new file mode 100644 index 0000000000..874b1b0dd7 Binary files /dev/null and b/packages/yoga/src/Fonts/Inter-800.ttf differ diff --git a/packages/yoga/src/Fonts/Inter-900.ttf b/packages/yoga/src/Fonts/Inter-900.ttf new file mode 100644 index 0000000000..b27822baea Binary files /dev/null and b/packages/yoga/src/Fonts/Inter-900.ttf differ diff --git a/packages/yoga/src/Fonts/Inter.ttf b/packages/yoga/src/Fonts/Inter.ttf new file mode 100644 index 0000000000..5e4851f0ab Binary files /dev/null and b/packages/yoga/src/Fonts/Inter.ttf differ diff --git a/packages/yoga/src/Theme/Provider/web/FontLoader.jsx b/packages/yoga/src/Theme/Provider/web/FontLoader.jsx index 5a6e7c94a7..55af608255 100644 --- a/packages/yoga/src/Theme/Provider/web/FontLoader.jsx +++ b/packages/yoga/src/Theme/Provider/web/FontLoader.jsx @@ -8,17 +8,21 @@ const FontLoader = ({ baseFont: { family, weight }, }, }, -}) => ( - <> - {typeof window !== 'undefined' ? ( - - ) : ( - - )} - -); +}) => { + const uniqueWeights = [...new Set(weight)]; + + return ( + <> + {typeof window !== 'undefined' ? ( + + ) : ( + + )} + + ); +}; export default withTheme(FontLoader); diff --git a/packages/yoga/src/Theme/Provider/web/FontLoader.test.jsx b/packages/yoga/src/Theme/Provider/web/FontLoader.test.jsx index 8fdf740361..963a6e9d4f 100644 --- a/packages/yoga/src/Theme/Provider/web/FontLoader.test.jsx +++ b/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( - ``, + ``, ); }); }); diff --git a/packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.js b/packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.ts similarity index 55% rename from packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.js rename to packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.ts index ff9eb594f4..42b84389ae 100644 --- a/packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.js +++ b/packages/yoga/src/Theme/helpers/themeGenerator/themeGenerator.ts @@ -1,9 +1,14 @@ +import YogaTokens from '@gympass/yoga-tokens'; + +type ThemeVars = { + (tokens: typeof YogaTokens): {}; + isFromThemeBuilder?: boolean; +}; + /** * Gets a function that one could sent to \ 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 \ */ -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.} tokens - object containing Yoga tokens */ - export default createTheme; diff --git a/packages/yoga/src/Theme/index.js b/packages/yoga/src/Theme/index.js index 778412f543..6f1d66be3e 100644 --- a/packages/yoga/src/Theme/index.js +++ b/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; diff --git a/packages/yoga/src/Theme/index.native.js b/packages/yoga/src/Theme/index.native.js index f3682e238f..6f8702ff85 100644 --- a/packages/yoga/src/Theme/index.native.js +++ b/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 }; diff --git a/packages/yoga/src/Theme/theme/index.js b/packages/yoga/src/Theme/theme/index.js index 18839d925a..c5c6fec42e 100644 --- a/packages/yoga/src/Theme/theme/index.js +++ b/packages/yoga/src/Theme/theme/index.js @@ -1,3 +1,5 @@ import theme from './theme'; +export { v3theme } from './v3theme'; + export default theme; diff --git a/packages/yoga/src/Theme/theme/v3theme.ts b/packages/yoga/src/Theme/theme/v3theme.ts new file mode 100644 index 0000000000..56e1c16893 --- /dev/null +++ b/packages/yoga/src/Theme/theme/v3theme.ts @@ -0,0 +1,64 @@ +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: Object.assign( + [tokens.colors.successNew, tokens.colors.hopeNew], + { + light: tokens.colors.successNew, + dark: tokens.colors.hopeNew, + }, + ), + informative: Object.assign( + [tokens.colors.neutralNew, tokens.colors.relaxNew], + { + light: tokens.colors.neutralNew, + dark: tokens.colors.relaxNew, + }, + ), + neutral: Object.assign( + [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, + }, +})); diff --git a/packages/yoga/src/index.native.js b/packages/yoga/src/index.native.js index 2ef5b79d6f..76d3235955 100644 --- a/packages/yoga/src/index.native.js +++ b/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, diff --git a/packages/yoga/src/index.ts b/packages/yoga/src/index.ts index 5c93b9d666..cfbaab95d1 100644 --- a/packages/yoga/src/index.ts +++ b/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,