Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for defining fonts in the theme #233

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

ergenekonyigit
Copy link

Description

This pr adds support for defining fonts in the theme. After this implementation, we can add custom fonts and use them in the theme.

// Config Object
const theme = createTheme({
  // ...
  fonts: {
    light: 'System',
    regular: 'System',
    medium: 'System',
    semiBold: 'System',
    bold: 'System',
  },
  textVariants: {
    defaults: {
      fontSize: 14,
      fontWeight: '400',
      fontFamily: 'regular',
      lineHeight: 16,
      color: 'contentPrimary',
    },
    subtitle01Regular: {
      fontSize: 20,
      fontWeight: '400',
      fontFamily: 'regular',
      lineHeight: 24,
    },
    subtitle01Medium: {
      fontSize: 20,
      fontWeight: '500',
      fontFamily: 'medium',
      lineHeight: 24,
    },
    subtitle01Semibold: {
      fontSize: 20,
      fontWeight: '600',
      fontFamily: 'semiBold',
      lineHeight: 24,
    },
    subtitle01Bold: {
      fontSize: 20,
      fontWeight: '700',
      fontFamily: 'bold',
      lineHeight: 24,
    },
  },
});
// Variable Font
import React from "react";
import { StatusBar } from "expo-status-bar";
import { ThemeProvider, theme } from "./src";
import Navigator from "./src/Navigator";

theme.fonts = {
  light: "Rubik",
  regular: "Rubik",
  medium: "Rubik",
  semiBold: "Rubik",
  bold: "Rubik",
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <StatusBar style="auto" />
      <Navigator />
    </ThemeProvider>
  );
}
// Static Font
import React from "react";
import { StatusBar } from "expo-status-bar";
import { ThemeProvider, theme } from "./src";
import Navigator from "./src/Navigator";

theme.fonts = {
  light: "Rubik-Light",
  regular: "Rubik-Regular",
  medium: "Rubik-Medium",
  semiBold: "Rubik-SemiBold",
  bold: "Rubik-Bold",
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <StatusBar style="auto" />
      <Navigator />
    </ThemeProvider>
  );
}

Screenshots or videos (if needed)

before-after

Checklist

@AnisDerbel
Copy link

can this PR be merged ASAP ? Thanks

@ergenekonyigit
Copy link
Author

I've updated the conflicts.

@ikedm
Copy link

ikedm commented Oct 19, 2023

@ergenekonyigit any updates on this?

@ergenekonyigit
Copy link
Author

@dalmendray I'm waiting for a review or merge.

@TarikOez
Copy link

@ergenekonyigit So I guess they didnt merged it?

@ergenekonyigit
Copy link
Author

@TarikOez unfortunately. Looks like this project is not maintained anymore.
cc @sebastianekstrom

thinkclay added a commit to Unicorn/restyle that referenced this pull request May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants