@razerspine/pug-ui-kit 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -29,3 +29,30 @@ You should now update to:
 ### Added
 - **Styles**: Full SCSS and LESS support for all UI components.
 - **Architecture**: Added global settings, grid system, and themes (light/dark).
+
+## [1.2.0] - 2026-02-03
+### Added
+- **Fonts**: Added local Roboto font family (Thin, Light, Regular, Medium, Bold, Black) directly into the package.
+- **Variables**: Introduced $font-path (SCSS) and @font-path (LESS) variables to manage font asset resolution dynamically.
+- **Styles**: Integrated @font-face declarations in base/_fonts.scss and base/_fonts.less
+
+### Fixed
+- **Assets**: Resolved "Module not found" errors in Webpack by using tilde-prefixed paths (~) for internal asset resolution.
+
+### Migration Guide (Optional)
+By default, the kit now looks for fonts inside the package. 
+If you wish to use a custom font path (e.g., a CDN or a different local folder), override the path variable before importing the kit:
+
+#### SCSS:
+
+```scss
+@use "@razerspine/pug-ui-kit/scss/settings" with (
+  $font-path: "/my-custom-path/fonts"
+);
+```
+#### LESS:
+
+```less
+@font-path: "/my-custom-path/fonts";
+@import "@razerspine/pug-ui-kit/less/ui-kit.less";
+```

package/index.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 module.exports = {
   paths: {
+    fonts: path.join(__dirname, 'fonts'),
     scss: path.join(__dirname, 'scss'),
     less: path.join(__dirname, 'less'),
     mixins: path.join(__dirname, 'mixins')

package/less/base/_fonts.less

@@ -1,7 +1,9 @@
+@import '../settings/_variables';
+
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Thin.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Thin.woff') format('woff');
+  src: url('@{font-path}/Roboto-Thin.woff2') format('woff2'),
+  url('@{font-path}/Roboto-Thin.woff') format('woff');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
@@ -9,8 +11,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Light.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Light.woff') format('woff');
+  src: url('@{font-path}/Roboto-Light.woff2') format('woff2'),
+  url('@{font-path}/Roboto-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
@@ -18,8 +20,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Regular.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Regular.woff') format('woff');
+  src: url('@{font-path}/Roboto-Regular.woff2') format('woff2'),
+  url('@{font-path}/Roboto-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -27,8 +29,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Medium.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Medium.woff') format('woff');
+  src: url('@{font-path}/Roboto-Medium.woff2') format('woff2'),
+  url('@{font-path}/Roboto-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
@@ -36,8 +38,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Bold.woff2') format('woff2'),
-  url("../../../fonts/Roboto-Bold.woff") format('woff');
+  src: url('@{font-path}/Roboto-Bold.woff2') format('woff2'),
+  url("@{font-path}/Roboto-Bold.woff") format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;

package/less/settings/_variables.less

@@ -11,3 +11,6 @@
 @main-min: 320px;
 @total-ratio: (@aside-ratio + @main-ratio);
 @available-width: calc(@container-max - (@gutter * 2)); // when layout have gap
+
+// font path
+@font-path: '~@razerspine/pug-ui-kit/fonts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razerspine/pug-ui-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shared Pug mixins for Webpack Starter templates",
   "keywords": [
     "pug",
@@ -10,6 +10,7 @@
   "main": "index.js",
   "files": [
     "mixins",
+    "fonts",
     "scss",
     "less",
     "index.js",

package/scss/base/_fonts.scss

@@ -1,7 +1,9 @@
+@use '../settings/_variables';
+
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Thin.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Thin.woff') format('woff');
+  src: url('#{$font-path}/Roboto-Thin.woff2') format('woff2'),
+  url('#{$font-path}/Roboto-Thin.woff') format('woff');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
@@ -9,8 +11,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Light.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Light.woff') format('woff');
+  src: url('#{$font-path}/Roboto-Light.woff2') format('woff2'),
+  url('#{$font-path}/Roboto-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
@@ -18,8 +20,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Regular.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Regular.woff') format('woff');
+  src: url('#{$font-path}/Roboto-Regular.woff2') format('woff2'),
+  url('#{$font-path}/Roboto-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -27,8 +29,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Medium.woff2') format('woff2'),
-  url('../../../fonts/Roboto-Medium.woff') format('woff');
+  src: url('#{$font-path}/Roboto-Medium.woff2') format('woff2'),
+  url('#{$font-path}/Roboto-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
@@ -36,8 +38,8 @@
 
 @font-face {
   font-family: 'Roboto';
-  src: url('../../../fonts/Roboto-Bold.woff2') format('woff2'),
-  url("../../../fonts/Roboto-Bold.woff") format('woff');
+  src: url('#{$font-path}/Roboto-Bold.woff2') format('woff2'),
+  url('#{$font-path}/Roboto-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;

package/scss/settings/_variables.scss

@@ -11,3 +11,6 @@ $aside-min: 300px;
 $main-min: 320px;
 $total-ratio: $aside-ratio + $main-ratio;
 $available-width: calc(#{$container-max} - #{calc(#{$gutter} * 2)}); // when layout have gap
+
+// font path
+$font-path: '~@razerspine/pug-ui-kit/fonts' !default;