Init Geist font (#2552)

core/.build/import-fonts.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { existsSync, mkdirSync } from 'fs'
+import { copySync } from 'fs-extra/esm'
+import { fileURLToPath } from 'url'
+import { join, dirname } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
+const toDir = join(__dirname, '..', 'fonts')
+
+// Create fonts directory if it doesn't exist
+if (!existsSync(toDir)) {
+	mkdirSync(toDir, { recursive: true })
+}
+
+// Copy geist-mono fonts
+const monoFrom = join(fromDir, 'geist-mono')
+const monoTo = join(toDir, 'geist-mono')
+
+if (existsSync(monoFrom)) {
+	if (!existsSync(monoTo)) {
+		mkdirSync(monoTo, { recursive: true })
+	}
+	
+	copySync(monoFrom, monoTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-mono fonts`)
+} else {
+	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
+}
+
+// Copy geist-sans fonts
+const sansFrom = join(fromDir, 'geist-sans')
+const sansTo = join(toDir, 'geist-sans')
+
+if (existsSync(sansFrom)) {
+	if (!existsSync(sansTo)) {
+		mkdirSync(sansTo, { recursive: true })
+	}
+	
+	copySync(sansFrom, sansTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-sans fonts`)
+} else {
+	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
+}
+

core/package.json

@@ -28,9 +28,11 @@
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "pnpm run copy-img && pnpm run copy-libs",
+    "copy": "pnpm run copy-img && pnpm run copy-libs && pnpm run copy-fonts",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy-libs": "node .build/copy-libs.mjs",
+    "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
+    "import-fonts": "node .build/import-fonts.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
@@ -163,6 +165,7 @@
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.7.4",
     "fullcalendar": "^6.1.19",
+    "geist": "^1.5.1",
     "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.7.0",

core/scss/_core.scss

@@ -4,6 +4,7 @@
 @import 'props';
 
 @import 'fonts/webfonts';
+@import 'fonts/geist';
 
 @import 'layout/root';
 @import 'layout/animations';

core/scss/_variables.scss

@@ -389,8 +389,8 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
-$font-family-sans-serif: ('Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: (Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
+$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
+$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
 $font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
 $font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
@@ -442,7 +442,7 @@ $font-weight-base: $font-weight-normal !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 $headings-color: inherit !default;
 
@@ -528,7 +528,7 @@ $initialism-font-size: $small-font-size !default;
 
 $sub-sup-font-size: 0.75em !default;
 
-$dt-font-weight: $font-weight-bold !default;
+$dt-font-weight: $font-weight-semibold !default;
 
 $list-inline-padding: 0.5rem !default;
 
@@ -1040,7 +1040,7 @@ $alert-padding-y: 0.75rem !default;
 $alert-padding-x: 1rem !default;
 $alert-margin-bottom: 1rem !default;
 $alert-border-radius: var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$alert-link-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $alert-border-width: var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -1062,7 +1062,7 @@ $breadcrumb-divider: string.quote('/') !default;
 $breadcrumb-divider-flipped: $breadcrumb-divider !default;
 $breadcrumb-border-radius: null !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
-$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $breadcrumb-variants: (
@@ -1540,7 +1540,7 @@ $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
 $navbar-brand-margin-end: 1rem !default;
-$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$navbar-brand-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;

core/scss/fonts/_geist.scss

@@ -0,0 +1,184 @@
+// Geist Sans Font Family
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Sans Variable Font
+@font-face {
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Font Family
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+// Geist Mono Variable Font
+@font-face {
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
+}
+

core/scss/marketing/_pricing.scss

@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
   justify-content: center;
   font-size: 2.5rem;
   line-height: 1;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
   margin: 0.75rem 0;
 }
 
@@ -87,7 +87,7 @@ $pricing-card-width: 22rem;
   font-size: $h2-font-size;
   line-height: 1.5;
   margin-inline-end: 0.25rem;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
 }
 
 .pricing-price-description {

core/scss/marketing/_sections.scss

@@ -72,7 +72,7 @@
 
 .section-title {
   font-size: var(--#{$prefix}font-size-h1);
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   line-height: 1.2;
 }
 

core/scss/ui/_forms.scss

@@ -139,7 +139,7 @@ Form help
  */
 .form-help {
   display: inline-flex;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   align-items: center;
   justify-content: center;
   width: 1.125rem;

core/scss/ui/_lists.scss

@@ -82,7 +82,7 @@
     }
 
     &.active {
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: var(--#{$prefix}font-weight-semibold);
       color: inherit;
       background: $list-group-active-bg;
 

core/scss/ui/_markdown.scss

@@ -27,7 +27,7 @@ Markdown
     h4,
     h5,
     h6 {
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: $headings-font-weight;
     }
 
     h2,

core/scss/ui/_nav.scss

@@ -17,7 +17,7 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-semibold);
     color: var(--#{$prefix}nav-link-active-color);
   }
 

core/scss/ui/_ribbons.scss

@@ -9,7 +9,7 @@
   z-index: 1;
   padding: 0.25rem 0.75rem;
   font-size: $card-ribbon-font-size;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   line-height: 1;
   color: $white;
   text-align: center;

core/scss/ui/_steps.scss

@@ -81,7 +81,7 @@
   }
 
   &.active {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-semibold);
 
     &:after {
       background: var(--#{$prefix}steps-inactive-color);

core/scss/ui/_type.scss

@@ -307,7 +307,7 @@ $text-variants: (
       border-radius: var(--#{$prefix}border-radius);
       line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
       font-size: var(--#{$prefix}font-size-h4);
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: var(--#{$prefix}font-weight-semibold);
     }
   }
 

core/scss/vendor/_apexcharts.scss

@@ -10,7 +10,7 @@
   background: transparent !important;
   border: 0 !important;
   margin: 0 !important;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   padding: 0.25rem 0.5rem !important;
 }
 

core/scss/vendor/_fullcalendar.scss

@@ -36,7 +36,7 @@
 }
 
 .fc-event-time {
-  font-weight: var(--#{$prefix}font-weight-bold) !important;
+  font-weight: var(--#{$prefix}font-weight-semibold) !important;
 }
 
 .fc-col-header-cell-cushion {