feat: move all fonts on same domain and add a new domain for welcometothejungle

.circleci/config.yml

@@ -80,12 +80,17 @@ jobs:
       - run:
           name: prepare font hash
           command: |
-            echo "export ICON_FONT_HASH=$(sha1sum packages/IconFont/fonts/welcome-icon-font-2.woff | awk '{ print $1 }')" >> $BASH_ENV
+            echo "export ICON_FONT_HASH=$(sha1sum packages/IconFont/fonts/welcome-icon-font.woff | awk '{ print $1 }')" >> $BASH_ENV
             source $BASH_ENV
             yarn build:core
       - aws-s3/sync:
           from: packages/IconFont/fonts
-          to: s3://welcome-ui/public/fonts/$ICON_FONT_HASH/
+          to: s3://welcome-ui/public/fonts/icon-font/$ICON_FONT_HASH/
+          arguments: |
+            --metadata GitCommit=$CIRCLE_SHA1 --delete
+      - aws-s3/sync:
+          from: packages/IconFont/fonts
+          to: s3://wttj-production/fonts/icon-font/$ICON_FONT_HASH/
           arguments: |
             --metadata GitCommit=$CIRCLE_SHA1 --delete
 

docs/pages/_app.js

@@ -5,7 +5,7 @@ import { Provider } from 'reakit'
 import { ThemeProvider } from '../context/theme'
 import { App } from '../components/App'
 
-require('@welcome-ui/icons.font/fonts/welcome-icon-font-2.css')
+require('@welcome-ui/icons.font/fonts/welcome-icon-font.css')
 
 const NextApp = ({ Component, pageProps }) => {
   return (

docs/pages/components/icons-font.mdx

@@ -33,7 +33,7 @@ import {
 
 To import IconFont css stylesheet, you should use this import path:
 
-<code language="javascript">{`require('@welcome-ui/icons.font/fonts/welcome-icon-font-2.css')`}</code>
+<code language="javascript">{`require('@welcome-ui/icons.font/fonts/welcome-icon-font.css')`}</code>
 
 Here is an example on how to use css class to display icons:
 

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.

packages/Core/src/theme/core.ts

@@ -59,18 +59,37 @@ import { getPaginations } from './paginations'
 import { getTabs } from './tabs'
 import { getBadges } from './badges'
 
-const DEFAULT_FONT_SIZE = 16
 const DEFAULT_FONT_FAMILY = 'Work Sans'
-const DEFAULT_LINE_HEIGHT = 1.15
+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/fonts'
 const HEADING_FONT_FAMILY = 'welcome-font'
-const ICON_FONT_FAMILY = 'welcome-icon-font-2'
+const ICON_FONT_FAMILY = 'welcome-icon-font'
+
+export type ThemeFontsUrl =
+  | 'https://cdn.welcome-ui.com/fonts'
+  | 'https://cdn.welcometothejungle.com/fonts'
+  | string
+
+export type Options = {
+  defaultFontFamily?: string
+  defaultFontSize?: number
+  defaultLetterSpacing?: string
+  defaultLineHeight?: number
+  fontsUrl?: ThemeFontsUrl
+  headingFontFamily?: string
+  iconFontFamily?: string
+  [param: string]: unknown
+}
 
-export const createTheme = (options: Record<string, unknown> = {}): WuiTheme => {
+export const createTheme = (options: Options = {}): WuiTheme => {
   const {
     defaultFontFamily = DEFAULT_FONT_FAMILY,
-    defaultLineHeight = DEFAULT_LINE_HEIGHT,
+    defaultFontSize = DEFAULT_FONT_SIZE,
     defaultLetterSpacing = DEFAULT_LETTER_SPACING,
+    defaultLineHeight = DEFAULT_LINE_HEIGHT,
+    fontsUrl = FONTS_URL,
     headingFontFamily = HEADING_FONT_FAMILY,
     iconFontFamily = ICON_FONT_FAMILY,
     ...rest
@@ -80,26 +99,22 @@ export const createTheme = (options: Record<string, unknown> = {}): WuiTheme =>
 
   theme.transformers = { ...rpxTransformers }
 
-  theme.toEm = px => `${px / DEFAULT_FONT_SIZE}em`
-  theme.toRem = px => `${px / DEFAULT_FONT_SIZE}rem`
-  theme.toPx = rem => `${rem * DEFAULT_FONT_SIZE}px`
+  theme.toEm = px => `${px / defaultFontSize}em`
+  theme.toRem = px => `${px / defaultFontSize}rem`
+  theme.toPx = rem => `${rem * defaultFontSize}px`
 
   theme.colors = colors
 
   // fonts
-  theme.fontFaces = fontFaces
+  theme.fontsUrl = fontsUrl
+  theme.fontFaces = fontFaces(theme)
   theme.fontSizes = getFontSizes('rem', theme)
   theme.defaultLineHeight = defaultLineHeight as number
   theme.defaultLetterSpacing = defaultLetterSpacing as string
   theme.lineHeights = getLineHeights(theme)
   theme.fontWeights = fontWeights
   theme.letterSpacings = getLetterSpacings(theme)
-  theme.fonts = getFonts(
-    defaultFontFamily as string,
-    headingFontFamily as string,
-    iconFontFamily as string
-  )
-
+  theme.fonts = getFonts(defaultFontFamily, headingFontFamily, iconFontFamily)
   theme.borderWidths = borderWidths
 
   theme.screens = screens

packages/Core/src/theme/fonts.ts

@@ -1,65 +1,64 @@
-type FontFaceExtension = 'woff' | 'woff2'
+import { WuiTheme } from './types'
 
 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 = {
   'welcome-font': FontFace[]
-  'welcome-icon-font-2': FontFace[]
+  'welcome-icon-font': FontFace[]
+  'Work Sans': FontFace[]
 }
 
-export const fontFaces: ThemeFontFaces = {
+export const fontFaces = (theme: WuiTheme): ThemeFontFaces => ({
   'welcome-font': [
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/fonts/welcome-font-regular',
+      url: `${theme.fontsUrl}/welcome-font-regular`,
       weight: '400',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/fonts/welcome-font-medium',
+      url: `${theme.fontsUrl}/welcome-font-medium`,
       weight: '500',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/fonts/welcome-font-bold',
+      url: `${theme.fontsUrl}/welcome-font-bold`,
       weight: '600',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
     },
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/fonts/welcome-font-regular-italic',
-      weight: '400',
+      url: `${theme.fontsUrl}/welcome-font-regular-italic`,
       style: 'italic',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
+      weight: '400',
     },
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/fonts/welcome-font-medium-italic',
-      weight: '500',
+      url: `${theme.fontsUrl}/welcome-font-medium-italic`,
       style: 'italic',
-      display: 'swap',
-      extensions: ['woff2', 'woff'],
+      weight: '500',
     },
     {
-      url: 'https://cdn.welcometothejungle.com/common/assets/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-2': [
+  'welcome-icon-font': [
     {
-      url: 'https://cdn.welcome-ui.com/fonts/__ICON_FONT_HASH__/welcome-icon-font-2',
+      url: `${theme.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
       display: 'block',
-      extensions: ['woff2', 'woff'],
     },
   ],
-}
+  'Work Sans': [
+    {
+      url: `${theme.fontsUrl}/work-sans-variable`,
+      isVariable: true,
+      stretch: '75% 125%',
+      style: 'oblique 0deg 20deg',
+      weight: '400 500 600',
+    },
+  ],
+})

packages/Core/src/theme/types.ts

@@ -58,6 +58,7 @@ import {
   ThemeTextsTextTransform,
 } from './typography'
 import { ThemeUnderline } from './underline'
+import { ThemeFontsUrl } from './core'
 
 type OverrideKeys =
   | 'colors'
@@ -89,6 +90,7 @@ export interface WuiTheme extends XStyledTheme, StyledComponentsTheme {
   underline: ThemeUnderline
   borderWidths: ThemeBorderWidths
   fontFaces: ThemeFontFaces
+  fontsUrl: ThemeFontsUrl
   fontSizes: ThemeFontSizes
   defaultLineHeight: number
   defaultLetterSpacing: string

packages/Core/src/theme/typography.ts

@@ -1,6 +1,7 @@
 import { CSSObject } from '@xstyled/styled-components'
 
 import { WuiTheme } from './types'
+import { Options } from './core'
 
 export type ThemeFontSizes = {
   h0: string
@@ -289,9 +290,9 @@ export type ThemeFonts = {
 }
 
 export const getFonts = (
-  defaultFontFamily: string,
-  headingFontFamily: string,
-  iconFontFamily: string
+  defaultFontFamily: Options['defaultFontFamily'],
+  headingFontFamily: Options['headingFontFamily'],
+  iconFontFamily: Options['iconFontFamily']
 ): ThemeFonts => {
   return {
     texts: [defaultFontFamily, 'sans-serif'].join(', '),

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};

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 }))
     )
   }