Update color reference links in UI component documentation to point to the correct base colors section

docs/icons/static-files/pdf.mdx

@@ -3,7 +3,7 @@ title: PDF version
 description: Download Tabler Icons in PDF format.
 ---
 
-![Tabler icon and PDF icon merging with npm command to install](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png)
+![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png)
 
 ## Installation
 

docs/ui/components/avatars.mdx

@@ -74,7 +74,7 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](/docs/ui/colors) to see the list of available colors.
+Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
 
 ```html example centered separated code
 <span class="avatar bg-green-lt">AB</span>

docs/ui/components/badges.mdx

@@ -73,7 +73,7 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
 
 ## Soft color badges
 
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/colors) to see the list of available colors and choose ones that best suit your design.
+You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design.
 
 ```html example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue-lt">Blue</span>

docs/ui/components/divider.mdx

@@ -42,7 +42,7 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
 ```html example height="380px"
 <p>

docs/ui/components/progress.mdx

@@ -69,7 +69,7 @@ This is how it looks like:
 
 You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
 
-Full list of available colors can be found [here](/docs/ui/colors).
+Full list of available colors can be found [here](/docs/ui/base/colors).
 
 ```html example columns={1} centered separated
 <div class="progress">

docs/ui/components/ribbons.mdx

@@ -69,7 +69,7 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
 
 ```html example columns={1} centered background="base"
 <div class="card">

docs/ui/components/steps.mdx

@@ -51,7 +51,7 @@ Add tooltips, if you want to provide users with additional information about the
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
 ```html example
 <div class="steps steps-green">