segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Custom font in theme does not applied #1403

Closed boskiv closed 2 years ago

boskiv commented 2 years ago

App

import { useState } from "react";
import {
  Button,
  Pane,
  Text,
  majorScale,
  defaultTheme,
  ThemeProvider,
} from "evergreen-ui";
import Header from "./Header";
import Editor from "./Editor";
import Output from "./Output";
import Debug from "./Debug";
import {merge} from "lodash";

const theme = merge(defaultTheme, {
  typography: {
    fontFamilies: {
      display: "IBM Plex Sans",
      ui: "IBM Plex Sans",
      mono: "IBM Plex Mono",
    }
  }
});

function App() {
  return (
    <ThemeProvider value={theme}>
      <div className="flex flex-col">
        <Header />
        <Editor />
        <div className="flex">
          <Output />
          <Debug />
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

Header

import { Button, Heading, Link, Pane } from "evergreen-ui";
import React from "react";

function Header() {
  return (
    <Pane display="flex" padding={10} background="#1A192B" borderBottom="muted" borderRadius={3}>
      <Pane flex={1} alignItems="center" display="flex">
        <Heading size={600} color="white">Left Aligned</Heading>
      </Pane>
      <Pane>
        {/* Below you can see the marginRight property on a Button. */}
        <Link marginRight={8} size={300} className="nav-link" cursor="pointer">LOGIN</Link>
        <Link marginRight={8} size={300} className="nav-link" cursor="pointer">REGISTER</Link>

      </Pane>
    </Pane>
  );
}

export default Header;

Screen Shot 2022-02-09 at 17 43 26

brandongregoryscott commented 2 years ago

Hey @boskiv,

It looks like you're merging the fontFamilies object incorrectly. The correct place would be at the root level, i.e.

const theme = merge(defaultTheme, {
  fontFamilies: {
    display: "IBM Plex Sans",
    ui: "IBM Plex Sans",
    mono: "IBM Plex Mono"
  }
});

If you're using TypeScript, I would recommend upgrading to v6.7.0 or higher. There is a mergeTheme function that provides a type-safe way to merge on custom theme values to ensure they still match the expected shape.

Here's an example CodeSandbox that demonstrates it (should be very similar to what you already have!) https://codesandbox.io/s/evergreen-issues-1403-0cp3q?file=/src/App.tsx