diff --git a/.build/reformat-mdx.js b/.build/reformat-mdx.js new file mode 100644 index 000000000..b95305199 --- /dev/null +++ b/.build/reformat-mdx.js @@ -0,0 +1,36 @@ +#!/usr/bin/env node + +'use strict' + +const fs = require('fs'), + path = require('path'), + glob = require('glob'), + beautifyHtml = require('js-beautify').html; + +const docs = glob + .sync(path.join(__dirname, `../docs/**/*.mdx`)) + +docs.forEach((file, i) => { + const oldContent = fs.readFileSync(file, 'utf8') + + // get codeblocks from markdown + const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => { + if (m2 === 'html') { + const m3m = beautifyHtml(m3, { + "indent_size": 2, + "indent_char": " ", + }).trim(); + + return m1 + m3m + "\n" + m4; + } + + return m + + + }) + + if (content !== oldContent) { + fs.writeFileSync(file, content, 'utf8') + console.log(`Reformatted ${file}`) + } +}) \ No newline at end of file diff --git a/docs/icons/libraries/preact.mdx b/docs/icons/libraries/preact.mdx index b22e80534..cc3be4d82 100644 --- a/docs/icons/libraries/preact.mdx +++ b/docs/icons/libraries/preact.mdx @@ -4,7 +4,7 @@ description: Tabler Icons library for Preact framework. summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png) +![](/docs/icons/package-preact.png) ## Installation diff --git a/docs/icons/libraries/react.mdx b/docs/icons/libraries/react.mdx index ebc363170..76b87105b 100644 --- a/docs/icons/libraries/react.mdx +++ b/docs/icons/libraries/react.mdx @@ -4,7 +4,7 @@ description: Tabler Icons library for React framework. summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png) +![](/docs/icons/package-react.png) ## Installation @@ -16,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases). It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. -```js +```jsx import { IconArrowLeft } from '@tabler/icons-react'; const App = () => { diff --git a/docs/icons/libraries/solidjs.mdx b/docs/icons/libraries/solidjs.mdx index 76f44e620..d02d25043 100644 --- a/docs/icons/libraries/solidjs.mdx +++ b/docs/icons/libraries/solidjs.mdx @@ -4,7 +4,8 @@ description: Tabler Icons library for SolidJS framework. summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png) +![](/docs/icons/package-solidjs.png) + ## Installation diff --git a/docs/icons/libraries/svelte.mdx b/docs/icons/libraries/svelte.mdx index 9e29728dc..82594d1be 100644 --- a/docs/icons/libraries/svelte.mdx +++ b/docs/icons/libraries/svelte.mdx @@ -4,7 +4,8 @@ description: Tabler Icons library for Svelte framework. summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png) +![](/docs/icons/package-svelte.png) + ## Installation diff --git a/docs/icons/libraries/vue.mdx b/docs/icons/libraries/vue.mdx index c237adb0a..796222394 100644 --- a/docs/icons/libraries/vue.mdx +++ b/docs/icons/libraries/vue.mdx @@ -4,7 +4,8 @@ description: Tabler Icons library for Vue framework. summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png) +![](/docs/icons/package-vue.png) + ## Installation @@ -22,12 +23,14 @@ All icons are Vue components that contain SVG elements. So any icon can be impor ``` diff --git a/docs/icons/libraries/webfont.mdx b/docs/icons/libraries/webfont.mdx index 7e7f32340..faa3766f0 100644 --- a/docs/icons/libraries/webfont.mdx +++ b/docs/icons/libraries/webfont.mdx @@ -4,7 +4,8 @@ description: Tabler Icons as a webfont. summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png) +![](/docs/icons/package-webfont.png) + ## Installation diff --git a/docs/icons/static-files/eps.mdx b/docs/icons/static-files/eps.mdx index 376dcc7c5..4934430f8 100644 --- a/docs/icons/static-files/eps.mdx +++ b/docs/icons/static-files/eps.mdx @@ -3,7 +3,8 @@ title: EPS version description: Download Tabler Icons in EPS format. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png) +![](/docs/icons/package-eps.png) + ## Installation diff --git a/docs/icons/static-files/pdf.mdx b/docs/icons/static-files/pdf.mdx index b2b91308f..ec28a662d 100644 --- a/docs/icons/static-files/pdf.mdx +++ b/docs/icons/static-files/pdf.mdx @@ -3,7 +3,8 @@ title: PDF version description: Download Tabler Icons in PDF format. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png) +![](/docs/icons/package-pdf.png) + ## Installation diff --git a/docs/icons/static-files/png.mdx b/docs/icons/static-files/png.mdx index 1e94c9e4c..fc8dab303 100644 --- a/docs/icons/static-files/png.mdx +++ b/docs/icons/static-files/png.mdx @@ -3,7 +3,8 @@ title: PNG version description: Download Tabler Icons in PNG format. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png) +![](/docs/icons/package-png.png) + ## Installation diff --git a/docs/icons/static-files/svg.mdx b/docs/icons/static-files/svg.mdx index 5731b1b63..5d32cb2d3 100644 --- a/docs/icons/static-files/svg.mdx +++ b/docs/icons/static-files/svg.mdx @@ -3,7 +3,7 @@ title: SVG version description: Download Tabler Icons in SVG format. --- -![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png) +![](/docs/icons/package-svg.png) ## Installation @@ -29,18 +29,7 @@ You can paste the content of the icon file into your HTML code to display it on ```html - + ... Click me @@ -51,10 +40,10 @@ Thanks to that, you can change the size, color and the `stroke-width` of the ico ```css .icon-tabler { - color: red; - width: 32px; - height: 32px; - stroke-width: 1.25; +color: red; +width: 32px; +height: 32px; +stroke-width: 1.25; } ``` diff --git a/docs/illustrations/index.mdx b/docs/illustrations/index.mdx index cf363ada5..13bf0ef6c 100644 --- a/docs/illustrations/index.mdx +++ b/docs/illustrations/index.mdx @@ -3,4 +3,6 @@ title: Tabler Illustrations order: 3 description: Customizable illustrations for modern web and mobile designs. summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience. ---- \ No newline at end of file +--- + +![](/docs/cover-illustrations.png) \ No newline at end of file diff --git a/docs/illustrations/introduction/customization.mdx b/docs/illustrations/introduction/customization.mdx index dd3b830d7..7dbce15f8 100644 --- a/docs/illustrations/introduction/customization.mdx +++ b/docs/illustrations/introduction/customization.mdx @@ -6,37 +6,37 @@ summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, an ```html example columns={1} centered vertical height="25rem" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` @@ -46,7 +46,7 @@ You can change the color of the illustration by setting the `--tblr-illustration ```html
- ... + ...
``` @@ -54,45 +54,45 @@ You can customize it globally by setting the variable on the `body` element or l ```css body { - --tblr-illustrations-primary: #CC0000; +--tblr-illustrations-primary: #CC0000; } ``` ```html example columns={1} centered vertical height="25rem"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` @@ -102,7 +102,7 @@ To change the color of the skin, use the `--tblr-illustrations-skin` CSS variabl ```html
- ... + ...
``` @@ -110,39 +110,39 @@ Look at the example below to see how you can change the color of the skin. ```html example columns={1} centered vertical height="25rem"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` @@ -153,128 +153,129 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust ```html example columns={1} centered vertical separated height="30rem" background="bg-light"
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
- -
-
-
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
- - + + +
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
``` @@ -285,39 +286,39 @@ Each illustration has a dark mode variant. To use it, copy the dark mode SVG cod ```html example columns={1} centered vertical separated height="25rem" background="dark"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` ## Autodark mode @@ -328,9 +329,11 @@ Illustration change theme based on the user's system preferences or `data-bs-the ```html - - ... - + + + ... + + ``` @@ -338,52 +341,77 @@ Look at the example below to see how the illustration changes based on the user' ```html example columns={1} centered vertical separated height="25rem" background="surface" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
``` \ No newline at end of file diff --git a/docs/img/browsers/brave.svg b/docs/img/browsers/brave.svg new file mode 100644 index 000000000..0bb889329 --- /dev/null +++ b/docs/img/browsers/brave.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/chrome.svg b/docs/img/browsers/chrome.svg new file mode 100644 index 000000000..67a40c205 --- /dev/null +++ b/docs/img/browsers/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/edge.svg b/docs/img/browsers/edge.svg new file mode 100644 index 000000000..12f3661cc --- /dev/null +++ b/docs/img/browsers/edge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/electron.svg b/docs/img/browsers/electron.svg new file mode 100644 index 000000000..f7ee7316e --- /dev/null +++ b/docs/img/browsers/electron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/firefox.svg b/docs/img/browsers/firefox.svg new file mode 100644 index 000000000..b36a75b9d --- /dev/null +++ b/docs/img/browsers/firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/internet-explorer.svg b/docs/img/browsers/internet-explorer.svg new file mode 100644 index 000000000..ff1896d46 --- /dev/null +++ b/docs/img/browsers/internet-explorer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/opera.svg b/docs/img/browsers/opera.svg new file mode 100644 index 000000000..b5a958b79 --- /dev/null +++ b/docs/img/browsers/opera.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/safari.svg b/docs/img/browsers/safari.svg new file mode 100644 index 000000000..d1b51a95b --- /dev/null +++ b/docs/img/browsers/safari.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/browsers/vivaldi.svg b/docs/img/browsers/vivaldi.svg new file mode 100644 index 000000000..ab698abd2 --- /dev/null +++ b/docs/img/browsers/vivaldi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/cover-illustrations-dark.png b/docs/img/cover-illustrations-dark.png new file mode 100644 index 000000000..d124edf6c Binary files /dev/null and b/docs/img/cover-illustrations-dark.png differ diff --git a/docs/img/cover-illustrations.png b/docs/img/cover-illustrations.png new file mode 100644 index 000000000..9cca0212c Binary files /dev/null and b/docs/img/cover-illustrations.png differ diff --git a/docs/img/cover-tabler-dark.png b/docs/img/cover-tabler-dark.png new file mode 100644 index 000000000..a2a1d167a Binary files /dev/null and b/docs/img/cover-tabler-dark.png differ diff --git a/docs/img/cover-tabler.png b/docs/img/cover-tabler.png new file mode 100644 index 000000000..bf54b6b53 Binary files /dev/null and b/docs/img/cover-tabler.png differ diff --git a/docs/img/icons/figma-plugin.png b/docs/img/icons/figma-plugin.png new file mode 100644 index 000000000..76d315fed Binary files /dev/null and b/docs/img/icons/figma-plugin.png differ diff --git a/docs/img/icons/package-angular-dark.png b/docs/img/icons/package-angular-dark.png new file mode 100644 index 000000000..756374a5e Binary files /dev/null and b/docs/img/icons/package-angular-dark.png differ diff --git a/docs/img/icons/package-angular.png b/docs/img/icons/package-angular.png new file mode 100644 index 000000000..00aa353fb Binary files /dev/null and b/docs/img/icons/package-angular.png differ diff --git a/docs/img/icons/package-eps-dark.png b/docs/img/icons/package-eps-dark.png new file mode 100644 index 000000000..ce65a2f42 Binary files /dev/null and b/docs/img/icons/package-eps-dark.png differ diff --git a/docs/img/icons/package-eps.png b/docs/img/icons/package-eps.png new file mode 100644 index 000000000..48fc0e178 Binary files /dev/null and b/docs/img/icons/package-eps.png differ diff --git a/docs/img/icons/package-js-dark.png b/docs/img/icons/package-js-dark.png new file mode 100644 index 000000000..3ee1f5a2a Binary files /dev/null and b/docs/img/icons/package-js-dark.png differ diff --git a/docs/img/icons/package-js.png b/docs/img/icons/package-js.png new file mode 100644 index 000000000..1b5aac4a9 Binary files /dev/null and b/docs/img/icons/package-js.png differ diff --git a/docs/img/icons/package-pdf-dark.png b/docs/img/icons/package-pdf-dark.png new file mode 100644 index 000000000..67fc56ad6 Binary files /dev/null and b/docs/img/icons/package-pdf-dark.png differ diff --git a/docs/img/icons/package-pdf.png b/docs/img/icons/package-pdf.png new file mode 100644 index 000000000..04e45e429 Binary files /dev/null and b/docs/img/icons/package-pdf.png differ diff --git a/docs/img/icons/package-png-dark.png b/docs/img/icons/package-png-dark.png new file mode 100644 index 000000000..48b85de40 Binary files /dev/null and b/docs/img/icons/package-png-dark.png differ diff --git a/docs/img/icons/package-png.png b/docs/img/icons/package-png.png new file mode 100644 index 000000000..be429b43f Binary files /dev/null and b/docs/img/icons/package-png.png differ diff --git a/docs/img/icons/package-preact-dark.png b/docs/img/icons/package-preact-dark.png new file mode 100644 index 000000000..33d539abf Binary files /dev/null and b/docs/img/icons/package-preact-dark.png differ diff --git a/docs/img/icons/package-preact.png b/docs/img/icons/package-preact.png new file mode 100644 index 000000000..983917c04 Binary files /dev/null and b/docs/img/icons/package-preact.png differ diff --git a/docs/img/icons/package-react-dark.png b/docs/img/icons/package-react-dark.png new file mode 100644 index 000000000..38d3db390 Binary files /dev/null and b/docs/img/icons/package-react-dark.png differ diff --git a/docs/img/icons/package-react-native-dark.png b/docs/img/icons/package-react-native-dark.png new file mode 100644 index 000000000..a59db969a Binary files /dev/null and b/docs/img/icons/package-react-native-dark.png differ diff --git a/docs/img/icons/package-react-native.png b/docs/img/icons/package-react-native.png new file mode 100644 index 000000000..6b9245a22 Binary files /dev/null and b/docs/img/icons/package-react-native.png differ diff --git a/docs/img/icons/package-react.png b/docs/img/icons/package-react.png new file mode 100644 index 000000000..9d99f9b2e Binary files /dev/null and b/docs/img/icons/package-react.png differ diff --git a/docs/img/icons/package-solidjs-dark.png b/docs/img/icons/package-solidjs-dark.png new file mode 100644 index 000000000..3b0bafa25 Binary files /dev/null and b/docs/img/icons/package-solidjs-dark.png differ diff --git a/docs/img/icons/package-solidjs.png b/docs/img/icons/package-solidjs.png new file mode 100644 index 000000000..69e9295fb Binary files /dev/null and b/docs/img/icons/package-solidjs.png differ diff --git a/docs/img/icons/package-sprite-dark.png b/docs/img/icons/package-sprite-dark.png new file mode 100644 index 000000000..2825e542b Binary files /dev/null and b/docs/img/icons/package-sprite-dark.png differ diff --git a/docs/img/icons/package-sprite.png b/docs/img/icons/package-sprite.png new file mode 100644 index 000000000..12dde6d2c Binary files /dev/null and b/docs/img/icons/package-sprite.png differ diff --git a/docs/img/icons/package-svelte-dark.png b/docs/img/icons/package-svelte-dark.png new file mode 100644 index 000000000..7f1db2ef1 Binary files /dev/null and b/docs/img/icons/package-svelte-dark.png differ diff --git a/docs/img/icons/package-svelte.png b/docs/img/icons/package-svelte.png new file mode 100644 index 000000000..1c9503532 Binary files /dev/null and b/docs/img/icons/package-svelte.png differ diff --git a/docs/img/icons/package-svg-dark.png b/docs/img/icons/package-svg-dark.png new file mode 100644 index 000000000..236e8f9d3 Binary files /dev/null and b/docs/img/icons/package-svg-dark.png differ diff --git a/docs/img/icons/package-svg.png b/docs/img/icons/package-svg.png new file mode 100644 index 000000000..24703977f Binary files /dev/null and b/docs/img/icons/package-svg.png differ diff --git a/docs/img/icons/package-vue-dark.png b/docs/img/icons/package-vue-dark.png new file mode 100644 index 000000000..f368f040f Binary files /dev/null and b/docs/img/icons/package-vue-dark.png differ diff --git a/docs/img/icons/package-vue.png b/docs/img/icons/package-vue.png new file mode 100644 index 000000000..aeffcd3bd Binary files /dev/null and b/docs/img/icons/package-vue.png differ diff --git a/docs/img/icons/package-webfont-dark.png b/docs/img/icons/package-webfont-dark.png new file mode 100644 index 000000000..0811758f5 Binary files /dev/null and b/docs/img/icons/package-webfont-dark.png differ diff --git a/docs/img/icons/package-webfont.png b/docs/img/icons/package-webfont.png new file mode 100644 index 000000000..30758748a Binary files /dev/null and b/docs/img/icons/package-webfont.png differ diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index c465c7cdb..4b03e3197 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -16,7 +16,7 @@ The `h1` tag is the highest level and the `h6` tag is the lowest level.

H3 Heading

H4 Heading

H5 Heading
-
H6 Heading
+
H6 Heading
``` There is example of headings with different levels: @@ -27,7 +27,7 @@ There is example of headings with different levels:

H3 Heading

H4 Heading

H5 Heading
-
H6 Heading
+
H6 Heading
``` ## Paragraphs @@ -75,23 +75,53 @@ Text Superscripted Here is an example of semantic text elements: ```html example vertical separated columns={1} -
I1f8N
+
+ I1f8N +
Bold
-
Citation
-
Hello World!
-
Deleted
-
Emphasis
-
Italic
-
Inserted
-
Ctrl + S
-
Highlighted
-
Strikethrough
-
Sample
-
Text Subscripted
-
Text Superscripted
-
-
Underline
-
x = y + 2
+
+ Citation +
+
+ Hello World! +
+
+ Deleted +
+
+ Emphasis +
+
+ Italic +
+
+ Inserted +
+
+ Ctrl + S +
+
+ Highlighted +
+
+ Strikethrough +
+
+ Sample +
+
Text Subscripted +
+
Text Superscripted +
+
+ +
+
+ Underline +
+
+ x = y + 2 +
``` @@ -194,16 +224,16 @@ Control the leading (line height) of an element. ```html example vertical centered separated columns={1} height="20rem"

- This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet. + This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.

- This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet. + This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.

- This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet. + This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.

- This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet. + This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.

``` diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.mdx index d13f2e5e7..ee6a0a860 100644 --- a/docs/ui/components/alerts.mdx +++ b/docs/ui/components/alerts.mdx @@ -350,14 +350,14 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp