@payfit/unity-themes 2.37.4 → 2.38.1

package/dist/css/generated/proprietary-fonts.css

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: "Heartbreak Eighties";
+  src: url('../fonts/heartbreak-eighties/HeartbreakEighties-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+},@font-face {
+  font-family: "Heartbreak Eighties";
+  src: url('../fonts/heartbreak-eighties/HeartbreakEighties-Oblique.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+}

package/dist/css/unity.css

@@ -35,6 +35,7 @@
 @import "@fontsource/source-serif-4/600.css";
 @import "@fontsource/source-serif-4/700.css";
 @import "@fontsource/roboto-mono";
+@import "./generated/proprietary-fonts.css";
 @import "tailwindcss" prefix(uy);
 
 @layer base {
@@ -68,7 +69,7 @@
     --uy-text-600: 28px;
     --uy-text-800: 30px;
     --uy-text-1000: 32px;
-    --uy-text-1200: 41px;
+    --uy-text-1200: 38px;
     --uy-text-1400: 52px;
     --uy-text-1600: 66px;
     --uy-font-weight-regular: 400;
@@ -617,7 +618,7 @@
     --uy-text-600: 28px;
     --uy-text-800: 30px;
     --uy-text-1000: 32px;
-    --uy-text-1200: 41px;
+    --uy-text-1200: 38px;
     --uy-text-1400: 52px;
     --uy-text-1600: 66px;
     --uy-font-weight-regular: 400;
@@ -805,7 +806,7 @@
     --uy-color-utility-shadow-500: oklch(0% 0 none / 0.12157);
     --uy-color-utility-shadow-600: oklch(0% 0 none / 0.12157);
     --uy-shadow-canvas: none;
-    --uy-font-serif: "Source Serif 4", serif;
+    --uy-font-serif: "Heartbreak Eighties", serif;
     --uy-font-sans: Inter, sans-serif;
     --uy-font-mono: "Roboto Mono", monospace;
     --uy-grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
@@ -1114,11 +1115,11 @@
     --uy-shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
     --uy-shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
     --uy-shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
-    --uy-typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000)/1.25
+    --uy-typography-default-display-heading: var(--uy-font-weight-regular) var(--uy-text-1200)/1.1578
       var(--uy-font-serif);
-    --uy-typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000)/1.25 var(--uy-font-serif);
-    --uy-typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800)/1.2 var(--uy-font-serif);
-    --uy-typography-sm-h1: var(--uy-font-weight-semibold) var(--uy-text-600)/1.286 var(--uy-font-serif);
+    --uy-typography-sm-display-heading: var(--uy-font-weight-regular) var(--uy-text-1200)/1.1578 var(--uy-font-serif);
+    --uy-typography-default-h1: var(--uy-font-weight-regular) var(--uy-text-1000)/1.125 var(--uy-font-serif);
+    --uy-typography-sm-h1: var(--uy-font-weight-regular) var(--uy-text-1000)/1.125 var(--uy-font-serif);
     --uy-typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400)/1.273 var(--uy-font-sans);
     --uy-typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500)/1.333 var(--uy-font-sans);
     --uy-typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200)/1.333 var(--uy-font-sans);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "2.37.4",
+  "version": "2.38.1",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",

package/src/scripts/build.ts

@@ -127,6 +127,9 @@ const sharedLogConfig = {
 const BUILD_PATH = './dist/css/'
 const OUTPUT_FILE = 'unity.css'
 const ANIMATIONS_PATH = './assets/animations/'
+const DIST_FONTS_PATH = './dist/css/fonts/'
+const DIST_ASSETS_FONTS_PATH = './dist/css/assets/fonts/'
+const GENERATED_FONTS_CSS_PATH = './dist/css/generated/proprietary-fonts.css'
 const PREFIX = 'uy'
 
 // ---------------------------------------------------------------------------
@@ -160,7 +163,7 @@ async function build() {
   const startTime = performance.now()
   console.log(color.bold('\n🏗  Unity Themes — Build\n'))
 
-  // 1. Legacy SD — css/variables with :root selector
+  // 1. Initialize SD instances
   logStep(1, TOTAL_STEPS, 'Initializing Style Dictionary instances')
   logDetail(
     `Legacy   — tokens/common + tokens/legacy → ${color.yellow(':root')}`,
@@ -248,16 +251,64 @@ async function build() {
     log: sharedLogConfig,
   })
 
-  // 4. Format all three in memory
-  logStep(2, TOTAL_STEPS, 'Formatting tokens (in-memory)')
+  // Fonts SD — built-in css/fonts format + copy_assets action
+  logDetail(
+    `Fonts    — tokens/common/font-assets.json → ${color.yellow(
+      'generated/proprietary-fonts.css',
+    )}`,
+  )
+  const fontsSD = new StyleDictionary({
+    source: ['./tokens/common/font-assets.json'],
+    platforms: {
+      css: {
+        buildPath: BUILD_PATH,
+        actions: ['copy_assets'],
+        files: [
+          {
+            destination: 'generated/proprietary-fonts.css',
+            format: 'css/fonts.css',
+            options: {
+              showFileHeader: false,
+            },
+          },
+        ],
+      },
+    },
+    log: sharedLogConfig,
+  })
+
+  // 2. Build fonts css + copy assets, then format theme outputs in-memory
+  logStep(2, TOTAL_STEPS, 'Building font assets and formatting tokens')
   const formatStart = performance.now()
 
   const [legacyOutputs, rebrandOutputs, themeOutputs] = await Promise.all([
     legacySD.formatPlatform('css'),
     rebrandSD.formatPlatform('css'),
     themeSD.formatPlatform('css'),
+    fontsSD.buildPlatform('css'),
   ])
 
+  // normalize copied assets path from dist/css/assets/fonts to dist/css/fonts
+  if (!fs.existsSync(DIST_ASSETS_FONTS_PATH)) {
+    throw new Error(`Missing copied font assets at ${DIST_ASSETS_FONTS_PATH}`)
+  }
+  fs.rmSync(DIST_FONTS_PATH, { recursive: true, force: true })
+  fs.cpSync(DIST_ASSETS_FONTS_PATH, DIST_FONTS_PATH, {
+    recursive: true,
+    filter: source => !source.includes(`${path.sep}LICENSES${path.sep}`),
+  })
+  fs.rmSync('./dist/css/assets/', { recursive: true, force: true })
+
+  if (!fs.existsSync(GENERATED_FONTS_CSS_PATH)) {
+    throw new Error(`Missing generated font CSS at ${GENERATED_FONTS_CSS_PATH}`)
+  }
+  const generatedFontsCss = fs.readFileSync(GENERATED_FONTS_CSS_PATH, 'utf8')
+  fs.writeFileSync(
+    GENERATED_FONTS_CSS_PATH,
+    generatedFontsCss.replaceAll('},`@font-face`', '}\n\n@font-face'),
+    'utf8',
+  )
+
   const legacyCss =
     typeof legacyOutputs[0]?.output === 'string' ? legacyOutputs[0].output : ''
   const rebrandCss =
@@ -279,7 +330,7 @@ async function build() {
   )
   logDetail(color.dim(`Formatted in ${formatDuration}ms`))
 
-  // 5. Generate header + custom variants
+  // 3. Generate header + custom variants
   logStep(3, TOTAL_STEPS, 'Generating file header and font imports')
   const headerLines = unityFileHeader()
   const header = [
@@ -295,6 +346,7 @@ async function build() {
     '@import "@fontsource/source-serif-4/600.css";',
     '@import "@fontsource/source-serif-4/700.css";',
     '@import "@fontsource/roboto-mono";',
+    '@import "./generated/proprietary-fonts.css";',
     `@import "tailwindcss" prefix(${PREFIX});`,
   ].join('\n')
 
@@ -306,7 +358,7 @@ async function build() {
   logDetail('theme-legacy  → [data-uy-theme="legacy"]')
   logDetail('theme-rebrand → [data-uy-theme="rebrand"]')
 
-  // 6. Compose and write
+  // 5. Compose and write
   logStep(5, TOTAL_STEPS, 'Composing multi-theme CSS')
   const outputPath = path.join(BUILD_PATH, OUTPUT_FILE)
   logDetail(`Output: ${color.yellow(outputPath)}`)
@@ -320,7 +372,7 @@ async function build() {
     outputPath,
   })
 
-  // 7. Append animation keyframes + reset CSS
+  // 6. Append animation keyframes + reset CSS
   logStep(6, TOTAL_STEPS, 'Appending animation keyframes')
   logDetail(`Source: ${color.yellow(ANIMATIONS_PATH)}`)
 

package/tokens/common/font-assets.json

@@ -0,0 +1,34 @@
+{
+  "asset": {
+    "font": {
+      "heartbreak-eighties-regular": {
+        "name": {
+          "value": "Heartbreak Eighties"
+        },
+        "woff2": {
+          "value": "fonts/heartbreak-eighties/HeartbreakEighties-Regular.woff2"
+        },
+        "style": {
+          "value": "normal"
+        },
+        "weight": {
+          "value": "400"
+        }
+      },
+      "heartbreak-eighties-oblique": {
+        "name": {
+          "value": "Heartbreak Eighties"
+        },
+        "woff2": {
+          "value": "fonts/heartbreak-eighties/HeartbreakEighties-Oblique.woff2"
+        },
+        "style": {
+          "value": "italic"
+        },
+        "weight": {
+          "value": "400"
+        }
+      }
+    }
+  }
+}

package/tokens/common/font-sizes.json

@@ -33,7 +33,7 @@
       "$value": "32px"
     },
     "1200": {
-      "$value": "41px"
+      "$value": "38px"
     },
     "1400": {
       "$value": "52px"

package/tokens/rebrand/text.json

@@ -2,7 +2,7 @@
   "font": {
     "$type": "fontFamily",
     "serif": {
-      "$value": ["Source Serif 4", "serif"]
+      "$value": ["Heartbreak Eighties", "serif"]
     },
     "sans": {
       "$value": ["Inter", "sans-serif"]

package/tokens/rebrand/typography.json

@@ -5,17 +5,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.serif}",
-          "fontSize": "{text.1000}",
-          "fontWeight": "{font-weight.semibold}",
-          "lineHeight": 1.25
+          "fontSize": "{text.1200}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.1578
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.serif}",
-          "fontSize": "{text.1000}",
-          "fontWeight": "{font-weight.semibold}",
-          "lineHeight": 1.25
+          "fontSize": "{text.1200}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.1578
         }
       }
     },
@@ -23,17 +23,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.serif}",
-          "fontSize": "{text.800}",
-          "fontWeight": "{font-weight.semibold}",
-          "lineHeight": 1.2
+          "fontSize": "{text.1000}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.125
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.serif}",
-          "fontWeight": "{font-weight.semibold}",
-          "lineHeight": 1.286,
-          "fontSize": "{text.600}"
+          "fontSize": "{text.1000}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.125
         }
       }
     },