@payfit/unity-themes 1.1.0 → 1.2.0

package/dist/css/unity.css

@@ -34,6 +34,7 @@
 @import "@fontsource/source-serif-4/500.css";
 @import "@fontsource/source-serif-4/600.css";
 @import "@fontsource/source-serif-4/700.css";
+@import "@fontsource/roboto-mono";
 @import "tailwindcss" prefix(uy);
 
 @theme static {
@@ -207,6 +208,10 @@
   --container-app-menu: 296px; /** Width of the main menu in global App layout */
   --container-lg: 984px; /** Maximum width for layout containers at large resolutions */
   --container-xl: 1144px; /** Maximum width for layout containers at extra-large resolutions */
+  --container-content: 523px; /** Maximum width for content containers */
+  --container-section: 703px; /** Maximum width for section containers */
+  --container-page: 1063px; /** Maximum width for page containers */
+  --container-app: 1439px; /** Maximum width for app containers */
   --spacing-0: 0;
   --spacing-25: 2px;
   --spacing-50: 4px;
@@ -231,6 +236,7 @@
   --aspect-square: 1 / 1;
   --font-serif: "Source Serif 4", serif;
   --font-sans: Inter, sans-serif;
+  --font-mono: "Roboto Mono", monospace;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",
@@ -10,6 +10,9 @@
     "tokens",
     "src"
   ],
+  "storybook": {
+    "url": "https://unity-theme.payfit.io/"
+  },
   "exports": {
     ".": {
       "import": {
@@ -26,16 +29,17 @@
   },
   "devDependencies": {
     "@fontsource/inter": "5.0.19",
+    "@fontsource/roboto-mono": "5.2.7",
     "@fontsource/source-serif-4": "5.0.19",
     "@payfit/code-pushup-tools": "0.0.0-use.local",
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/vite-configs": "0.0.0-use.local",
-    "@storybook/addon-a11y": "9.1.5",
-    "@storybook/addon-docs": "9.1.5",
-    "@storybook/addon-links": "9.1.5",
-    "@storybook/addon-vitest": "9.1.5",
-    "@storybook/react-vite": "9.1.5",
+    "@storybook/addon-a11y": "9.1.7",
+    "@storybook/addon-docs": "9.1.7",
+    "@storybook/addon-links": "9.1.7",
+    "@storybook/addon-vitest": "9.1.7",
+    "@storybook/react-vite": "9.1.7",
     "@storybook/test-runner": "0.23.0",
     "@tailwindcss/vite": "4.1.11",
     "@types/lodash": "4.14.202",
@@ -51,19 +55,21 @@
     "prettier": "3.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "9.1.5",
+    "storybook": "9.1.7",
     "tsx": "4.17.0",
     "typescript": "5.9.2",
-    "vite": "6.3.5",
+    "vite": "7.1.6",
     "vitest": "3.2.4"
   },
   "peerDependencies": {
     "@fontsource/inter": "5.0.19",
+    "@fontsource/roboto-mono": "5.2.7",
     "@fontsource/source-serif-4": "5.0.19",
     "tailwindcss": "4.1.11"
   },
   "dependencies": {
     "@fontsource/inter": "5.0.19",
+    "@fontsource/roboto-mono": "5.2.7",
     "@fontsource/source-serif-4": "5.0.19",
     "colorjs.io": "0.5.2",
     "style-dictionary": "5.0.0",

package/src/scripts/formats/generators/header-generator.ts

@@ -17,6 +17,7 @@ export async function generateThemeHeader(
     '@import "@fontsource/source-serif-4/500.css";',
     '@import "@fontsource/source-serif-4/600.css";',
     '@import "@fontsource/source-serif-4/700.css";',
+    '@import "@fontsource/roboto-mono";',
   ].join('\n')
 
   const tailwindImport = options.prefix

package/src/scripts/formats/unity-theme.test.ts

@@ -247,6 +247,7 @@ describe('css/unity-theme Format', () => {
       @import "@fontsource/source-serif-4/500.css";
       @import "@fontsource/source-serif-4/600.css";
       @import "@fontsource/source-serif-4/700.css";
+      @import "@fontsource/roboto-mono";
       @import "tailwindcss";
 
       @theme static {
@@ -359,6 +360,7 @@ describe('css/unity-theme Format', () => {
       @import "@fontsource/source-serif-4/500.css";
       @import "@fontsource/source-serif-4/600.css";
       @import "@fontsource/source-serif-4/700.css";
+      @import "@fontsource/roboto-mono";
       @import "tailwindcss" prefix(uy);
 
       @theme static {

package/tokens/sizes.json

@@ -21,6 +21,34 @@
       "$extensions": {
         "com.payfit.unity.only": ["maxWidth"]
       }
+    },
+    "content": {
+      "$value": "523px",
+      "$description": "Maximum width for content containers",
+      "$extensions": {
+        "com.payfit.unity.only": ["maxWidth"]
+      }
+    },
+    "section": {
+      "$value": "703px",
+      "$description": "Maximum width for section containers",
+      "$extensions": {
+        "com.payfit.unity.only": ["maxWidth"]
+      }
+    },
+    "page": {
+      "$value": "1063px",
+      "$description": "Maximum width for page containers",
+      "$extensions": {
+        "com.payfit.unity.only": ["maxWidth"]
+      }
+    },
+    "app": {
+      "$value": "1439px",
+      "$description": "Maximum width for app containers",
+      "$extensions": {
+        "com.payfit.unity.only": ["maxWidth"]
+      }
     }
   }
 }

package/tokens/text.json

@@ -6,6 +6,9 @@
     },
     "sans": {
       "$value": ["Inter", "sans-serif"]
+    },
+    "mono": {
+      "$value": ["Roboto Mono", "monospace"]
     }
   },
   "font-weight": {