diff --git a/docs/illustrations/index.mdx b/docs/illustrations/index.mdx new file mode 100644 index 000000000..cf363ada5 --- /dev/null +++ b/docs/illustrations/index.mdx @@ -0,0 +1,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 diff --git a/docs/illustrations/introduction/customization.mdx b/docs/illustrations/introduction/customization.mdx new file mode 100644 index 000000000..dd3b830d7 --- /dev/null +++ b/docs/illustrations/introduction/customization.mdx @@ -0,0 +1,414 @@ +--- +title: Customization +description: Customize the illustrations to match your brand. +summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding. +--- + +```html example columns={1} centered vertical height="25rem" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## Color of the illustration + +You can change the color of the illustration by setting the `--tblr-illustrations-primary` CSS variable to the desired color. This will change the color of the primary elements in the illustration. + +```html +
+ ... +
+``` + +You can customize it globally by setting the variable on the `body` element or locally by setting it on a parent element. + +```css +body { + --tblr-illustrations-primary: #CC0000; +} +``` + +```html example columns={1} centered vertical height="25rem" +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` + +## Color of the skin + +To change the color of the skin, use the `--tblr-illustrations-skin` CSS variable. + +```html +
+ ... +
+``` + +Look at the example below to see how you can change the color of the skin. + +```html example columns={1} centered vertical height="25rem" +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` + + +## Application Brand Color + +Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illustrations-primary` is not set, so if you have a primary color set in your design system, you can use that to ensure consistency across your project. + +```html example columns={1} centered vertical separated height="30rem" background="bg-light" +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +``` + + +## Dark version of the illustration + +Each illustration has a dark mode variant. To use it, copy the dark mode SVG code and paste it into your project. The dark mode variant is available for all illustrations. + +```html example columns={1} centered vertical separated height="25rem" background="dark" +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## Autodark mode + +Tabler Illustrations supports autodark mode, which automatically switches the color scheme of the illustrations based on the user's system preferences. To enable autodark mode, copy illustration code from the `svg-css-autodark` folder. + +Illustration change theme based on the user's system preferences or `data-bs-theme` attribute or `theme` class. + +```html + + + ... + + +``` + +Look at the example below to see how the illustration changes based on the user's system preferences. + +```html example columns={1} centered vertical separated height="25rem" background="surface" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ + +``` \ No newline at end of file diff --git a/docs/illustrations/introduction/index.mdx b/docs/illustrations/introduction/index.mdx new file mode 100644 index 000000000..82debd5ea --- /dev/null +++ b/docs/illustrations/introduction/index.mdx @@ -0,0 +1,5 @@ +--- +title: Introduction +description: Introduction to Tabler Illustrations and their key features. +summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations +--- \ No newline at end of file diff --git a/docs/index.mdx b/docs/index.mdx index ad2d76149..8273d01c6 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -10,7 +10,7 @@ Find all the guides and resources you need to develop with Tabler and our other Free and open source web application UI kit based on Bootstrap pixel-perfect icons for web design and development - customizable SVG illustrations for your web project + customizable SVG illustrations for your web project responsive email templates ready to use in your marketing campaigns Package of over 100 avatars for your next web project