fix: variable work sans font

WTTJ · Jul 26, 2023 · f4081dc · f4081dc
1 parent 9a812a7
commit f4081dc
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 86 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -85,7 +85,7 @@ jobs:
             yarn build:core
       - aws-s3/sync:
           from: packages/IconFont/fonts
-          to: s3://welcome-ui/fonts/icon-font/$ICON_FONT_HASH/
+          to: s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1 --delete
       - aws-s3/sync:

diff --git a/docs/components/App.js b/docs/components/App.js
@@ -37,10 +37,7 @@ export function App({ component: Component, pageProps }) {
   }, [themeStorage])
 
   return (
-    <WuiProvider
-      reactRootId="__next"
-      theme={createTheme({ fontsUrl: 'https://cdn.welcometothejungle.com', ...globalTheme })}
-    >
+    <WuiProvider reactRootId="__next" theme={createTheme(globalTheme)}>
       <MDXProvider components={MDXComponents}>
         <GlobalStyle />
         <Head />

diff --git a/docs/pages/theming/customize.mdx b/docs/pages/theming/customize.mdx
@@ -140,6 +140,14 @@ export default function Root() {
 }
 ```
 
+## Change fonts path url
+
+If you wan to change the url path for the fonts, you can change the property `fontsUrl` on `createTheme()`. On our case at Welcome to the jungle, we want to have the fonts from the same domain name as our main website. By default is on welcome-ui.com domain.
+
+```jsx live=false
+const theme = createTheme({ fontsUrl: 'https://cdn.welcometothejungle.com/fonts', ...yourTheme })
+```
+
 ## All theme values
 
 Here are all the [possible values for your theme](https://github.com/WTTJ/welcome-ui/blob/master/packages/Core/theme/core.ts).<br />These will be merged with the default theme.

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build:core": "./scripts/core.sh",
     "build:docs": "lerna run doc --concurrency 2",
-    "build:packages": "lerna run build --ignore docs",
+    "build:packages": "lerna run build --ignore docs --ignore @welcome-ui/core",
     "build:types": "lerna run types",
     "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types && yarn build:docs",
     "check:audit": "/bin/bash -c 'yarn audit --level critical; [[ $? -ge 16 ]] && exit 1 || exit 0'",

diff --git a/packages/Core/src/theme/core.ts b/packages/Core/src/theme/core.ts
@@ -63,13 +63,13 @@ const DEFAULT_FONT_FAMILY = 'Work Sans'
 const DEFAULT_FONT_SIZE = 16
 const DEFAULT_LETTER_SPACING = '-0.019rem'
 const DEFAULT_LINE_HEIGHT = 1.15
-const FONTS_URL = 'https://cdn.welcome-ui.com'
+const FONTS_URL = 'https://cdn.welcome-ui.com/fonts'
 const HEADING_FONT_FAMILY = 'welcome-font'
 const ICON_FONT_FAMILY = 'welcome-icon-font'
 
 export type ThemeFontsUrl =
-  | 'https://cdn.welcome-ui.com'
-  | 'https://cdn.welcometothejungle.com'
+  | 'https://cdn.welcome-ui.com/fonts'
+  | 'https://cdn.welcometothejungle.com/fonts'
   | string
 
 export type Options = {
@@ -115,7 +115,6 @@ export const createTheme = (options: Options = {}): WuiTheme => {
   theme.fontWeights = fontWeights
   theme.letterSpacings = getLetterSpacings(theme)
   theme.fonts = getFonts(defaultFontFamily, headingFontFamily, iconFontFamily)
-
   theme.borderWidths = borderWidths
 
   theme.screens = screens

diff --git a/packages/Core/src/theme/fonts.ts b/packages/Core/src/theme/fonts.ts
@@ -1,13 +1,13 @@
 import { WuiTheme } from './types'
 
-type FontFaceExtension = 'woff' | 'woff2'
-
 type FontFace = {
+  display?: FontDisplay
+  isVariable?: boolean
+  stretch?: string
+  style?: string
   url: string
   weight?: string
-  style?: 'italic'
-  display: 'swap' | 'block'
-  extensions: FontFaceExtension[]
+  extensions?: string[]
 }
 
 export type ThemeFontFaces = {
@@ -19,57 +19,46 @@ export type ThemeFontFaces = {
 export const fontFaces = (theme: WuiTheme): ThemeFontFaces => ({
   'welcome-font': [
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-regular`,
+      url: `${theme.fontsUrl}/welcome-font-regular`,
       weight: '400',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-medium`,
+      url: `${theme.fontsUrl}/welcome-font-medium`,
       weight: '500',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-bold`,
+      url: `${theme.fontsUrl}/welcome-font-bold`,
       weight: '600',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-regular-italic`,
-      weight: '400',
+      url: `${theme.fontsUrl}/welcome-font-regular-italic`,
       style: 'italic',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
+      weight: '400',
     },
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-medium-italic`,
-      weight: '500',
+      url: `${theme.fontsUrl}/welcome-font-medium-italic`,
       style: 'italic',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
+      weight: '500',
     },
     {
-      url: `${theme.fontsUrl}/fonts/welcome-font-bold-italic`,
-      weight: '600',
+      url: `${theme.fontsUrl}/welcome-font-bold-italic`,
       style: 'italic',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
+      weight: '600',
     },
   ],
   'welcome-icon-font': [
     {
-      url: `${theme.fontsUrl}/fonts/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
+      url: `${theme.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
       display: 'block',
-      extensions: ['woff2', 'woff'],
     },
   ],
   'Work Sans': [
     {
-      url: `${theme.fontsUrl}/fonts/work-sans-variable`,
-      display: 'block',
-      extensions: ['woff2', 'woff'],
+      url: `${theme.fontsUrl}/work-sans-variable`,
+      isVariable: true,
+      stretch: '75% 125%',
+      style: 'oblique 0deg 20deg',
+      weight: '400 500 600',
     },
   ],
 })
diff --git a/packages/Core/src/utils/base.ts b/packages/Core/src/utils/base.ts
@@ -2,7 +2,6 @@ import { createGlobalStyle, css, th } from '@xstyled/styled-components'
 
 import { fonts } from './font'
 import { normalizeStyle, resetStyles } from './reset'
-import { workSans } from './work-sans'
 
 const baseBoxSizing = css`
   * {
@@ -33,7 +32,6 @@ function baseFonts() {
 export const GlobalStyle = createGlobalStyle<{ useReset?: boolean }>(
   ({ useReset }) => css`
     ${normalizeStyle};
-    ${workSans()}
     ${fonts()};
     ${baseFonts()};
     ${useReset ? resetStyles : baseBoxSizing};

diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts
@@ -2,42 +2,51 @@ import { css } from '@xstyled/styled-components'
 
 import { WuiTheme } from '../theme/types'
 
-function getFormat(extension: string) {
-  return extension === 'ttf' ? 'truetype' : extension
-}
-
-function getUrl(url: string, extension: string) {
-  return `url('${url}.${extension}') format('${getFormat(extension)}')`
-}
-
-type Descriptor = {
-  name: string
+type FontVariation = {
   url: string
-  extensions: string[]
-  display?: string
+  display?: FontDisplay
   weight?: string
   style?: string
+  isVariable?: boolean
+  extension?: string
+}
+
+type Font = {
+  name: string
+  variation: FontVariation
 }
 
-function getSrc(descriptor: Descriptor) {
-  return descriptor.extensions
-    .map((extension: string) => getUrl(descriptor.url, extension))
-    .join(', ')
+function getSource(
+  url: FontVariation['url'],
+  extension: FontVariation['extension'],
+  isVariable: FontVariation['isVariable']
+) {
+  const formattedExtension = extension === 'ttf' ? 'truetype' : extension
+
+  /** variable icon font */
+  if (isVariable) {
+    return `url('${url}.${extension}') format('${formattedExtension}-variations');`
+  }
+
+  return `url('${url}.${extension}') format('${formattedExtension}')`
 }
 
-function getFont(descriptor: Descriptor) {
+function getFont({
+  name,
+  variation: { display = 'swap', extension = 'woff2', isVariable, style, url, weight },
+}: Font) {
   return css`
     @font-face {
-      font-family: ${descriptor.name};
-      src: ${getSrc(descriptor)};
-      font-display: ${descriptor.display || 'fallback'};
-      ${descriptor.weight &&
+      font-family: ${name};
+      src: ${getSource(url, extension, isVariable)};
+      font-display: ${display};
+      ${weight &&
       css`
-        font-weight: ${descriptor.weight};
+        font-weight: ${weight};
       `}
-      ${descriptor.style &&
+      ${style &&
       css`
-        font-style: ${descriptor.style};
+        font-style: ${style};
       `}
     }
   `
@@ -47,7 +56,8 @@ export const fonts =
   () =>
   ({ theme }: { theme: WuiTheme }): ReturnType<typeof css> => {
     if (!theme || !theme.fontFaces) return null
+
     return Object.entries(theme.fontFaces).map(([name, variations]) =>
-      variations.map(variation => getFont({ name, ...variation }))
+      variations.map(variation => getFont({ name, variation }))
     )
   }
diff --git a/packages/Core/src/utils/work-sans.ts b/packages/Core/src/utils/work-sans.ts
diff --git a/scripts/webfont-deploy.sh b/scripts/webfont-deploy.sh
@@ -6,9 +6,9 @@ FONT_FILE="$FONTS_DIR/welcome-icon-font.woff"
 if [[ -f "$FONT_FILE" ]]; then
   ICON_FONT_HASH=$(sha1sum $FONT_FILE | awk '{ print $1 }')
 
-  echo "Copying fonts to s3://welcome-ui/fonts/icon-font/$ICON_FONT_HASH/"
+  echo "Copying fonts to s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/"
 
-  aws s3 sync $FONTS_DIR s3://welcome-ui/fonts/icon-font/$ICON_FONT_HASH/
+  aws s3 sync $FONTS_DIR s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/
 
   echo "Copying fonts to s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH/"