chore(deps): bump actions/cache from 4 to 5

Bumps [actions/cache](https://github.com/actions/cache) from 4 to 5.
- [Release notes](https://github.com/actions/cache/releases)
- [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md)
- [Commits](https://github.com/actions/cache/compare/v4...v5)

---
updated-dependencies:
- dependency-name: actions/cache
  dependency-version: '5'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.changeset/docs-css-variables-font-sizes.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated documentation to explain font sizing and system color CSS variables (`--tblr-primary-rgb`, `--tblr-secondary`, `--tblr-tertiary`, `--tblr-link-color`, `--tblr-gray-*`).

.cursor/rules/branch-naming.mdc

@@ -0,0 +1,38 @@
+---
+description: Git Branch Naming Rules
+globs:
+alwaysApply: true
+---
+
+## Branch naming
+
+- Use lowercase branch names.
+- Use a type prefix and a short description in kebab-case.
+- Format: `<type>/<short-description>` or `<type>/<issue-id>-<short-description>`
+- Use `gh-123` as the issue id format (avoid `#` in branch names).
+
+### Allowed types
+
+- `feat` - new features
+- `fix` - bug fixes
+- `docs` - documentation changes
+- `chore` - maintenance / tooling
+- `refactor` - code refactoring (no behavior change)
+- `test` - tests only
+- `build` - build system changes
+- `ci` - CI changes
+- `perf` - performance improvements
+- `style` - formatting / lint-only changes
+- `revert` - reverting prior changes
+
+### Examples
+
+- `feat/gh-123-add-stepper-component`
+- `fix/markdown-table-overflow`
+- `docs/gh-45-update-contributing`
+- `chore/update-pnpm-lock`
+
+### Notes
+
+- Branch off `dev` by default (unless maintainers request otherwise).
+- Avoid spaces, uppercase letters, and special characters other than `/` and `-`.

.cursor/rules/pull-request.mdc

@@ -0,0 +1,39 @@
+---
+description: Pull Request Title & Description Rules
+globs:
+alwaysApply: true
+---
+
+## Pull request title
+
+- Write PR titles in **English**.
+- Start the title with a **capital letter**.
+- Use **present tense** and keep it concise (ideally <= 72 chars).
+- Avoid a trailing period.
+
+### Examples
+
+- `Improve markdown table overflow handling`
+- `Clarify contributing branch naming`
+- `Add onboarding stepper page`
+
+## Pull request description
+
+- Write PR descriptions in **English**.
+- Focus on **why** the change is needed and what user-visible effect it has.
+- Keep it skimmable: bullets, short paragraphs, clear headings.
+
+### Recommended template
+
+```md
+## Summary
+- <1–3 bullets describing the change and why>
+
+## Changes
+- <key implementation notes, non-obvious decisions>
+```
+
+### Notes
+
+- If you changed SCSS or any package behavior, add a **changeset** describing it (one sentence, with backticks for code elements).
+- If a PR is WIP, mark it as draft and prefix the title with `WIP:` only while it is not ready for review.

.github/workflows/type-check.yml

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Cache turbo build setup
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with: 
           path: .turbo
           key: ${{ runner.os }}-turbo-${{ github.sha }}

core/.build/vite.config.mts

@@ -0,0 +1,30 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { createViteConfig } from '../../.build/vite.config.helper'
+import getBanner from '../../shared/banner/index.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const baseName = process.env.BASE_NAME || 'tabler'
+const entryFile = baseName
+const libraryName = baseName
+
+const bannerText = getBanner()
+
+const entryPath = path.resolve(__dirname, `../js/${entryFile}`)
+const entry = `${entryPath}.ts`
+
+export default createViteConfig({
+	entry: entry,
+	name: libraryName,
+	fileName: (format) => {
+		const esmSuffix = format === 'es' ? '.esm' : ''
+		return `${baseName}${esmSuffix}.js`
+	},
+	formats: ['es', 'umd'],
+	outDir: path.resolve(__dirname, '../dist/js'),
+	banner: bannerText,
+	minify: false
+})
+

core/.build/vite.config.ts

@@ -1,33 +0,0 @@
-import path from 'node:path'
-import process from 'node:process'
-import { fileURLToPath } from 'node:url'
-import { existsSync } from 'node:fs'
-import { createViteConfig } from '../../.build/vite.config.helper'
-import getBanner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const ESM = process.env.ESM === 'true'
-const THEME = process.env.THEME === 'true'
-
-const MINIFY = process.env.MINIFY === 'true'
-const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
-const entryFile = `tabler${THEME ? '-theme' : ''}`
-const libraryName = `tabler${THEME ? '-theme' : ''}`
-
-const bannerText = getBanner()
-
-// Try .ts first, fallback to .js for gradual migration
-const entryPath = path.resolve(__dirname, `../js/${entryFile}`)
-const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
-
-export default createViteConfig({
-	entry: entry,
-	name: ESM ? undefined : libraryName,
-	fileName: () => MINIFY ? `${destinationFile}.min.js` : `${destinationFile}.js`,
-	formats: [ESM ? 'es' : 'umd'],
-	outDir: path.resolve(__dirname, '../dist/js'),
-	banner: bannerText,
-	minify: MINIFY ? true : false
-})
-

core/package.json

@@ -19,16 +19,12 @@
     "css-lint": "pnpm run css-lint-variables",
     "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
     "js": "pnpm run js-build && pnpm run js-build-min",
-    "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-standalone-esm\" \"pnpm run js-build-theme\" \"pnpm run js-build-theme-esm\"",
-    "js-build-theme-esm": "cross-env THEME=true ESM=true vite build --config .build/vite.config.ts",
-    "js-build-theme": "cross-env THEME=true vite build --config .build/vite.config.ts",
-    "js-build-standalone": "vite build --config .build/vite.config.ts",
-    "js-build-standalone-esm": "cross-env ESM=true vite build --config .build/vite.config.ts",
-    "js-build-min": "concurrently \"pnpm run js-build-min-standalone\" \"pnpm run js-build-min-standalone-esm\" \"pnpm run js-build-min-theme\" \"pnpm run js-build-min-theme-esm\"",
-    "js-build-min-standalone": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
-    "js-build-min-standalone-esm": "cross-env MINIFY=true ESM=true vite build --config .build/vite.config.ts",
-    "js-build-min-theme": "cross-env MINIFY=true THEME=true vite build --config .build/vite.config.ts",
-    "js-build-min-theme-esm": "cross-env MINIFY=true THEME=true ESM=true vite build --config .build/vite.config.ts",
+    "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-theme\"",
+    "js-build-theme": "cross-env BASE_NAME=tabler-theme vite build --config .build/vite.config.mts",
+    "js-build-standalone": "cross-env BASE_NAME=tabler vite build --config .build/vite.config.mts",
+    "js-build-min": "concurrently \"pnpm run js-build-min-standalone\" \"pnpm run js-build-min-theme\"",
+    "js-build-min-standalone": "concurrently \"terser dist/js/tabler.js --compress --mangle --comments '/@license|@preserve|^!/' --source-map \\\"content=dist/js/tabler.js.map,filename=dist/js/tabler.min.js.map,url=tabler.min.js.map\\\" -o dist/js/tabler.min.js\" \"terser dist/js/tabler.esm.js --module --compress --mangle --comments '/@license|@preserve|^!/' --source-map \\\"content=dist/js/tabler.esm.js.map,filename=dist/js/tabler.esm.min.js.map,url=tabler.esm.min.js.map\\\" -o dist/js/tabler.esm.min.js\"",
+    "js-build-min-theme": "concurrently \"terser dist/js/tabler-theme.js --compress --mangle --comments '/@license|@preserve|^!/' --source-map \\\"content=dist/js/tabler-theme.js.map,filename=dist/js/tabler-theme.min.js.map,url=tabler-theme.min.js.map\\\" -o dist/js/tabler-theme.min.js\" \"terser dist/js/tabler-theme.esm.js --module --compress --mangle --comments '/@license|@preserve|^!/' --source-map \\\"content=dist/js/tabler-theme.esm.js.map,filename=dist/js/tabler-theme.esm.min.js.map,url=tabler-theme.esm.min.js.map\\\" -o dist/js/tabler-theme.esm.min.js\"",
     "copy": "concurrently \"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": "tsx .build/copy-libs.ts",

core/scss/_props.scss

@@ -32,7 +32,6 @@
 
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
-    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_variables.scss

@@ -495,6 +495,11 @@ $line-heights: (
   h4: $h4-line-height,
   h5: $h5-line-height,
   h6: $h6-line-height,
+
+  base: $line-height-base,
+  sm: $line-height-sm,
+  lg: $line-height-lg,
+  xl: $line-height-xl,
 ) !default;
 
 $display-font-sizes: (

core/scss/mixins/_functions.scss

@@ -138,8 +138,6 @@
 
 // Colors
 @function to-rgb($value) {
-  @debug $value;
-  
   @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 

core/scss/ui/_markdown.scss

@@ -1,8 +1,12 @@
+$markdown-font-size: var(--#{$prefix}font-size-h3) !default;
+$markdown-line-height: var(--#{$prefix}line-height-lg) !default;
+
 /**
 Markdown
  */
 .markdown {
-  line-height: $line-height-xl;
+  line-height: $markdown-line-height;
+  font-size: $markdown-font-size;
 
   > :first-child {
     margin-top: 0;

docs/.build/vite.config.mts

@@ -1,25 +1,20 @@
 import path from 'node:path'
-import process from 'node:process'
 import { fileURLToPath } from 'node:url'
-import { existsSync } from 'node:fs'
 import { createViteConfig } from '../../.build/vite.config.helper'
 import getBanner from '../../shared/banner/index.mjs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-const MINIFY = process.env.MINIFY === 'true'
-
-// Try .ts first, fallback to .js for gradual migration
 const entryPath = path.resolve(__dirname, '../js/docs')
-const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+const entry = `${entryPath}.ts`
 
 export default createViteConfig({
 	entry: entry,
 	name: 'docs',
-	fileName: () => MINIFY ? 'docs.min.js' : 'docs.js',
+	fileName: () => 'docs.js',
 	formats: ['es'],
 	outDir: path.resolve(__dirname, '../dist/js'),
 	banner: undefined,
-	minify: MINIFY
+	minify: false
 })
 

docs/content/ui/getting-started/customize.md

@@ -27,6 +27,35 @@ Now you just need to tell Tabler to use your favorite font:
 </style>
 ```
 
+## Custom font sizes
+
+Tabler exposes typography settings as CSS variables. You can override them by setting variables on `:root` (global) or on any container (scoped).
+
+### Base font size
+
+To change the default font size used by body text and many components, override `--tblr-body-font-size`:
+
+```html
+<style>
+  :root {
+    --tblr-body-font-size: 1rem;
+  }
+</style>
+```
+
+### Headings
+
+Headings use `--tblr-font-size-h1` … `--tblr-font-size-h6` and `--tblr-line-height-h1` … `--tblr-line-height-h6`:
+
+```html
+<style>
+  :root {
+    --tblr-font-size-h1: 2rem;
+    --tblr-line-height-h1: 2.5rem;
+  }
+</style>
+```
+
 ## Custom primary color
 
 To change the primary color of Tabler you need to set the `--tblr-primary` variable in your CSS. You can use any color format you like (hex, rgb, hsl, etc). In this example we will use a custom red color:
@@ -34,7 +63,56 @@ To change the primary color of Tabler you need to set the `--tblr-primary` varia
 ```html
 <style>
   :root {
-	 --tblr-primary: #F11D46;
+    --tblr-primary: #f11d46;
   }
 </style>
-```
+```
+
+If you use `--tblr-primary` in `rgba()` contexts (or see inconsistent colors), also override `--tblr-primary-rgb` (as comma-separated RGB values) and optionally `--tblr-primary-fg` (text/icon color used on primary backgrounds):
+
+```html
+<style>
+  :root {
+    --tblr-primary: #f11d46;
+    --tblr-primary-rgb: 241, 29, 70;
+    --tblr-primary-fg: #fff;
+  }
+</style>
+```
+
+## Other system colors
+
+Tabler also exposes a few "system" colors you can customize globally:
+
+```html
+<style>
+  :root {
+    --tblr-secondary: #6b7280;
+    --tblr-tertiary: #9ca3af;
+    --tblr-link-color: #066fd1;
+    --tblr-link-hover-color: #045db0;
+  }
+</style>
+```
+
+### Gray scale
+
+You can override the full gray palette (`--tblr-gray-50` … `--tblr-gray-950`) to match your brand:
+
+```html
+<style>
+  :root {
+    --tblr-gray-50: #f9fafb;
+    --tblr-gray-100: #f3f4f6;
+    --tblr-gray-200: #e5e7eb;
+    --tblr-gray-300: #d1d5db;
+    --tblr-gray-400: #9ca3af;
+    --tblr-gray-500: #6b7280;
+    --tblr-gray-600: #4b5563;
+    --tblr-gray-700: #374151;
+    --tblr-gray-800: #1f2937;
+    --tblr-gray-900: #111827;
+    --tblr-gray-950: #030712;
+  }
+</style>
+```

docs/content/ui/getting-started/how-to-contribute.md

@@ -30,7 +30,8 @@ Follow these steps to set up Tabler for development:
 3. Create a new branch for your changes:
 
    ```bash
-   git checkout -b your-branch-name
+   # Use the project branch naming convention, e.g.:
+   git checkout -b fix/markdown-table-overflow
 	```
 
 ## Development

docs/package.json

@@ -8,9 +8,9 @@
     "build-assets": "concurrently \"pnpm run js\" \"pnpm run css\"",
     "html": "eleventy",
     "js": "pnpm run js-build && pnpm run js-build-min",
-    "js-build": "vite build --config .build/vite.config.ts",
+    "js-build": "vite build --config .build/vite.config.mts",
     "js-build-min": "pnpm run js-build-min-docs",
-    "js-build-min-docs": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
+    "js-build-min-docs": "terser dist/js/docs.js --module --compress --mangle --comments '/@license|@preserve|^!/' --source-map \"content=dist/js/docs.js.map,filename=dist/js/docs.min.js.map,url=docs.min.js.map\" -o dist/js/docs.min.js",
     "css": "pnpm run css-build && pnpm run css-prefix && pnpm run css-minify",
     "css-build": "sass scss/:dist/css/ --no-source-map --load-path=./node_modules",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",

package.json

@@ -34,7 +34,7 @@
     "js-beautify": "^1.15.4",
     "markdownlint-cli": "^0.47.0",
     "nodemon": "^3.1.11",
-    "pnpm": "^10.6.5",
+    "pnpm": "^10.27.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.7.4",

pnpm-lock.yaml

@@ -52,8 +52,8 @@ importers:
         specifier: ^3.1.11
         version: 3.1.11
       pnpm:
-        specifier: ^10.6.5
-        version: 10.6.5
+        specifier: ^10.27.0
+        version: 10.27.0
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
@@ -439,8 +439,8 @@ packages:
       search-insights:
         optional: true
 
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
   '@epic-web/invariant@1.0.0':
     resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
@@ -1394,6 +1394,9 @@ packages:
   caniuse-lite@1.0.30001762:
     resolution: {integrity: sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==}
 
+  caniuse-lite@1.0.30001763:
+    resolution: {integrity: sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==}
+
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
 
@@ -2711,8 +2714,8 @@ packages:
   plyr@3.8.3:
     resolution: {integrity: sha512-0+iI5uw0WRvtKBpgPCkmQQv7ucHVQKTEo6UFJjgJ8cy/JZhy0dQqshHQVitHXV6l2O3MzhgnuvQ95VSkWcWeSw==}
 
-  pnpm@10.6.5:
-    resolution: {integrity: sha512-zfko/KIIMs1Z7FOCZJK33CXcUk1DcLa0rb9lgD0y76psHIgUfArk6NV5psnuxxV1e1DU+jXuoXnYaOraTtBDrw==}
+  pnpm@10.27.0:
+    resolution: {integrity: sha512-ctaZ2haxF5wUup5k3HHJpAmIy9xlwmTLDkidt96RfyDc9NZNhyNiXylpulLUt+KhFwaC2awqXcrqq3MrfhbwSg==}
     engines: {node: '>=18.12'}
     hasBin: true
 
@@ -3903,7 +3906,7 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@emnapi/runtime@1.7.1':
+  '@emnapi/runtime@1.8.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -4101,7 +4104,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.34.5':
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/runtime': 1.8.1
     optional: true
 
   '@img/sharp-win32-arm64@0.34.5':
@@ -4669,6 +4672,8 @@ snapshots:
 
   caniuse-lite@1.0.30001762: {}
 
+  caniuse-lite@1.0.30001763: {}
+
   caseless@0.12.0: {}
 
   ccount@2.0.1: {}
@@ -5851,7 +5856,7 @@ snapshots:
     dependencies:
       '@next/env': 16.0.4
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001762
+      caniuse-lite: 1.0.30001763
       postcss: 8.4.31
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
@@ -6060,7 +6065,7 @@ snapshots:
       rangetouch: 2.0.1
       url-polyfill: 1.1.13
 
-  pnpm@10.6.5: {}
+  pnpm@10.27.0: {}
 
   postcss-cli@11.0.1(postcss@8.5.6)(tsx@4.21.0):
     dependencies:

preview/.build/vite.config.mts

@@ -1,26 +1,22 @@
 import path from 'node:path'
-import process from 'node:process'
 import { fileURLToPath } from 'node:url'
-import { existsSync } from 'node:fs'
 import { createViteConfig } from '../../.build/vite.config.helper'
 import getBanner from '../../shared/banner/index.mjs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-const MINIFY = process.env.MINIFY === 'true'
 const bannerText = getBanner('Demo')
 
-// Try .ts first, fallback to .js for gradual migration
 const entryPath = path.resolve(__dirname, '../js/demo')
-const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+const entry = `${entryPath}.ts`
 
 export default createViteConfig({
 	entry: entry,
 	name: 'demo',
-	fileName: () => MINIFY ? 'demo.min.js' : 'demo.js',
+	fileName: () => 'demo.js',
 	formats: ['es'],
 	outDir: path.resolve(__dirname, '../dist/preview/js'),
 	banner: bannerText,
-	minify: MINIFY
+	minify: false
 })
 

preview/package.json

@@ -15,9 +15,9 @@
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/preview/css/*.css\" \"!dist/preview/css/*.rtl*.css\" \"!dist/preview/css/*.min.css\"",
     "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/preview/css/ --batch --batch-suffix \".min\" \"dist/preview/css/*.css\" \"!dist/preview/css/*.min.css\" \"!dist/preview/css/*rtl*.css\"",
     "js": "pnpm run js-build && pnpm run js-build-min",
-    "js-build": "vite build --config .build/vite.config.ts",
+    "js-build": "vite build --config .build/vite.config.mts",
     "js-build-min": "pnpm run js-build-min-demo",
-    "js-build-min-demo": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
+    "js-build-min-demo": "terser dist/preview/js/demo.js --module --compress --mangle --comments '/@license|@preserve|^!/' --source-map \"content=dist/preview/js/demo.js.map,filename=dist/preview/js/demo.min.js.map,url=demo.min.js.map\" -o dist/preview/js/demo.min.js",
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify && pnpm run html-remove-prettier-ignore",
     "html-build": "eleventy",