From 88b9e87c6ed17c34911f6b09ddc00439bb4a6ab4 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 19 Apr 2025 12:06:46 +0200 Subject: [PATCH] feat: enhance documentation links and improve SCSS styles for better readability --- core/scss/ui/_alerts.scss | 2 +- core/scss/ui/_markdown.scss | 1 + core/scss/ui/_type.scss | 4 ++ docs/content/emails/introduction/contents.md | 4 +- docs/content/icons/plugins/figma.md | 2 +- docs/content/ui/components/alerts.md | 55 +++-------------- docs/content/ui/components/avatars.md | 2 +- docs/content/ui/components/buttons.md | 2 +- docs/content/ui/components/divider.md | 2 +- docs/content/ui/components/icons.md | 2 +- docs/content/ui/components/progress.md | 2 +- docs/content/ui/components/ribbons.md | 2 +- docs/content/ui/components/spinners.md | 2 +- docs/content/ui/components/statuses.md | 2 +- docs/content/ui/components/steps.md | 2 +- docs/content/ui/components/tracking.md | 2 +- docs/content/ui/forms/form-color-check.md | 2 +- docs/content/ui/forms/form-elements.md | 16 +++-- docs/content/ui/forms/form-image-check.md | 2 +- .../ui/getting-started/how-to-contribute.md | 2 +- .../ui/getting-started/installation.md | 2 +- docs/content/ui/layout/page-layouts.md | 2 +- docs/eleventy.config.mjs | 1 - docs/scss/docs.scss | 29 +++++---- shared/e11ty/filters.mjs | 8 +++ shared/includes/docs/download-button.html | 2 +- shared/includes/docs/example.html | 2 +- shared/includes/docs/menu.html | 6 +- shared/includes/docs/navbar.html | 3 + shared/includes/ui/alert.html | 60 +++++++++---------- shared/layouts/docs/default.html | 6 +- 31 files changed, 105 insertions(+), 126 deletions(-) diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss index c96f4b2c6..ee9a9e016 100644 --- a/core/scss/ui/_alerts.scss +++ b/core/scss/ui/_alerts.scss @@ -15,7 +15,7 @@ position: relative; padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); margin-bottom: var(--#{$prefix}alert-margin-bottom); - background-color: var(--#{$prefix}alert-bg); + background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface)); border-radius: var(--#{$prefix}alert-border-radius); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color); display: flex; diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index 0fbead0c6..4f2bcdb83 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -2,6 +2,7 @@ Markdown */ .markdown { + font-size: $font-size-200; line-height: $line-height-xl; > :first-child { diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index d573a4d84..e8490870b 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -71,6 +71,10 @@ h6, line-height: var(--#{$prefix}line-height-h6); } +.fs-base { + font-size: var(--#{$prefix}body-font-size); +} + strong, .strong, b { diff --git a/docs/content/emails/introduction/contents.md b/docs/content/emails/introduction/contents.md index b7290b272..bf7d35747 100644 --- a/docs/content/emails/introduction/contents.md +++ b/docs/content/emails/introduction/contents.md @@ -44,8 +44,8 @@ The **Tabler Emails** package is organized into a clear and efficient folder str ### 1. Email Templates: `emails/` This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files: -* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/docs/emails/compiled-html) section. -* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section. +* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/img/emails/compiled-html) section. +* Source HTML files for light and dark themes. Find more information in the [Source HTML](/img/emails/source-html) section. * Screenshot images for desktop and mobile views. * Assets folder with images used in the email template and the CSS file with styles. diff --git a/docs/content/icons/plugins/figma.md b/docs/content/icons/plugins/figma.md index dbce1ecf0..3b513652a 100644 --- a/docs/content/icons/plugins/figma.md +++ b/docs/content/icons/plugins/figma.md @@ -4,7 +4,7 @@ description: Use Tabler Icons directly in Figma. summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow. --- -![Tabler Figma Plugin](/docs/icons/figma-plugin.png) +![Tabler Figma Plugin](/img/icons/figma-plugin.png) The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic. diff --git a/docs/content/ui/components/alerts.md b/docs/content/ui/components/alerts.md index 9e04ed5f5..a0ae7b781 100644 --- a/docs/content/ui/components/alerts.md +++ b/docs/content/ui/components/alerts.md @@ -14,22 +14,10 @@ Combine `alert` class with one of the following: `alert-success`, `alert-info`, Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content. {% capture html -%} - - - - +{% include "ui/alert.html" type="success" title="Wow! Everything worked!" description="Your account has been saved!" %} +{% include "ui/alert.html" type="info" title="Did you know?" description="Here is something that you might like to know." %} +{% include "ui/alert.html" type="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." %} +{% include "ui/alert.html" type="danger" title="I'm so sorry…" description="Your account has been deleted and can't be restored." %} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -38,9 +26,7 @@ Alert classes affect the color of all the text inside an alert. Use another clas Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color. {% capture html -%} -
- This is a danger alert — check it out! -
+{% include "ui/alert.html" type="danger" title="This is a danger alert" link="check it out" %} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -53,34 +39,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you ``` {% capture html -%} - - - - +{% include "ui/alert.html" type="danger" title="This is a danger alert" show-close %} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -415,4 +374,6 @@ You're not limited to the 4 default alert colors. You can use any [base or socia ## SASS variables +You can customize the alert colors by changing the SASS variables. The default values are: + {% scss-docs "alert-variables" "ui/_alerts.scss" %} \ No newline at end of file diff --git a/docs/content/ui/components/avatars.md b/docs/content/ui/components/avatars.md index 02c8eb14b..e13f3fa68 100644 --- a/docs/content/ui/components/avatars.md +++ b/docs/content/ui/components/avatars.md @@ -64,7 +64,7 @@ Besides pictures and initials, you can also use icons to make the avatars more u ## Avatar initials color -Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors. +Customize the color of the avatars' background. You can click [here](/img/ui/base/colors) to see the list of available colors. {% capture html -%} AB diff --git a/docs/content/ui/components/buttons.md b/docs/content/ui/components/buttons.md index f078677a2..ca8ab8eac 100644 --- a/docs/content/ui/components/buttons.md +++ b/docs/content/ui/components/buttons.md @@ -151,7 +151,7 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look. -Icons can be found [**here**](/docs/components/icons) +Icons can be found [**here**](/img/components/icons) {% capture html -%}