From 9bf0824376d6366712fbc3812529dd3c50ce48b2 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Tue, 14 Jan 2025 13:42:52 +0100
Subject: [PATCH] Update code snippets in documentation to remove unnecessary
 background attributes

---
 docs/illustrations/introduction/customization.mdx |  4 ++--
 docs/ui/components/alerts.mdx                     | 14 +++++++-------
 docs/ui/components/autosize.mdx                   |  2 +-
 docs/ui/components/badges.mdx                     |  2 +-
 docs/ui/components/breadcrumb.mdx                 |  2 +-
 docs/ui/components/charts.mdx                     | 12 ++++++------
 docs/ui/components/dropzone.mdx                   |  6 +++---
 docs/ui/components/placeholder.mdx                |  2 +-
 docs/ui/components/spinners.mdx                   |  6 +++---
 docs/ui/components/vector-maps.mdx                |  4 ++--
 docs/ui/forms/form-color-check.mdx                |  4 ++--
 docs/ui/forms/form-validation.mdx                 |  8 ++++----
 docs/ui/layout/navbars.mdx                        |  2 +-
 docs/ui/layout/page-layouts.mdx                   |  4 ++--
 docs/ui/plugins/payments.mdx                      |  4 ++--
 15 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/docs/illustrations/introduction/customization.mdx b/docs/illustrations/introduction/customization.mdx
index ea2ae873e..36a083ec4 100644
--- a/docs/illustrations/introduction/customization.mdx
+++ b/docs/illustrations/introduction/customization.mdx
@@ -151,7 +151,7 @@ Look at the example below to see how you can change the color of the skin.
 
 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"
+```html example columns={1} centered vertical separated height="30rem"
 <div class="card">
   <div class="card-body">
     <div>
@@ -335,7 +335,7 @@ Illustration change theme based on the user's system preferences or `data-bs-the
 
 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"
+```html example columns={1} centered vertical separated height="25rem"
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
   <style>
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a {
diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.mdx
index 6596c244d..dd595c8b5 100644
--- a/docs/ui/components/alerts.mdx
+++ b/docs/ui/components/alerts.mdx
@@ -9,7 +9,7 @@ description: Alert messages for user notifications.
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -39,7 +39,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical background="surface" columns={2} centered
+```html example vertical columns={2} centered
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -49,7 +49,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -154,7 +154,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 
 To see how the icon affects the alert modal, look at the example below.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -224,7 +224,7 @@ To see how the icon affects the alert modal, look at the example below.
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -271,7 +271,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -322,7 +322,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 
 Look at the example below to see how the important alert affects the alert modal.
 
-```html example vertical background="surface" columns={2} centered separated
+```html example vertical columns={2} centered separated
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.mdx
index 1babaf273..47ee92922 100644
--- a/docs/ui/components/autosize.mdx
+++ b/docs/ui/components/autosize.mdx
@@ -19,7 +19,7 @@ To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to th
 
 Look at the example below to see how the autosize element works:
 
-```html example centered columns={1} scrollable background="bg-light" height="20rem"
+```html example centered columns={1} scrollable height="20rem"
 <label class="form-label">Autosize example</label>
 <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
 ```
diff --git a/docs/ui/components/badges.mdx b/docs/ui/components/badges.mdx
index e66a0242f..cb5243be2 100644
--- a/docs/ui/components/badges.mdx
+++ b/docs/ui/components/badges.mdx
@@ -110,7 +110,7 @@ Badges can be used as part of links or buttons to provide a counter.
 
 The results can be seen in the example below.
 
-```html example centered separated background="surface"
+```html example centered separated
 <button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
 <button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span>
diff --git a/docs/ui/components/breadcrumb.mdx b/docs/ui/components/breadcrumb.mdx
index ee579da5f..fff0f2337 100644
--- a/docs/ui/components/breadcrumb.mdx
+++ b/docs/ui/components/breadcrumb.mdx
@@ -133,7 +133,7 @@ You can use the `breadcrumb-muted` class to create a muted breadcrumb style. Thi
 
 You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
 
-```html example vertical centered columns={3} background="surface"
+```html example vertical centered columns={3}
 <div class="page-header">
   <div class="row align-items-center mw-100">
     <div class="col">
diff --git a/docs/ui/components/charts.mdx b/docs/ui/components/charts.mdx
index 16f222414..d68e7b4d5 100644
--- a/docs/ui/components/charts.mdx
+++ b/docs/ui/components/charts.mdx
@@ -13,7 +13,7 @@ See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-line" class="chart-lg"></div>
@@ -105,7 +105,7 @@ Line charts are an essential tool for visualizing data trends over time. They ar
 
 Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-area" class="chart-lg"></div>
@@ -201,7 +201,7 @@ Area charts are ideal for representing cumulative data over time. They add visua
 
 Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-bar" class="chart-lg"></div>
@@ -307,7 +307,7 @@ Bar charts are highly effective for comparing data across different categories.
 
 Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
@@ -365,7 +365,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
 
 Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
@@ -423,7 +423,7 @@ Heatmaps provide a graphical representation of data where individual values are
 
 For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
 
-```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-social-referrals" class="chart-lg"></div>
diff --git a/docs/ui/components/dropzone.mdx b/docs/ui/components/dropzone.mdx
index 30ac013e4..f5c851108 100644
--- a/docs/ui/components/dropzone.mdx
+++ b/docs/ui/components/dropzone.mdx
@@ -28,7 +28,7 @@ To initialize the Dropzone form, you need to create a new instance of the Dropzo
 
 The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
 
-```html example vendors height="240px" libs="dropzone" background="surface"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="..." type="file" />
@@ -51,7 +51,7 @@ To allow users to upload multiple files at once, you can enable the `multiple` a
 
 By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
 
-```html example vendors height="240px" libs="dropzone" background="surface"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" multiple />
@@ -68,7 +68,7 @@ By adding the `multiple` attribute to the input field, users can select multiple
 
 You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
 
-```html example vendors height="240px" libs="dropzone" background="surface"
+```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
diff --git a/docs/ui/components/placeholder.mdx b/docs/ui/components/placeholder.mdx
index 0942fbc6c..5fa9b8a9c 100644
--- a/docs/ui/components/placeholder.mdx
+++ b/docs/ui/components/placeholder.mdx
@@ -153,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html example columns={1} height={1000} separated vertical scrollable background="surface"
+```html example columns={1} height={1000} separated vertical scrollable
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">
diff --git a/docs/ui/components/spinners.mdx b/docs/ui/components/spinners.mdx
index e0b6b72c7..6658ea85c 100644
--- a/docs/ui/components/spinners.mdx
+++ b/docs/ui/components/spinners.mdx
@@ -95,7 +95,7 @@ Use buttons with spinners to notify users that an action they have taken by clic
 
 Look at the example below to see how the button with a spinner works:
 
-```html example centered separated code background="bg-light"
+```html example centered separated code
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -122,14 +122,14 @@ Look at the example below to see how the button with a spinner works:
 
 Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
 
-```html example centered code background="bg-light"
+```html example centered code
 <h1>Loading<span class="animated-dots"></span>
 </h1>
 ```
 
 Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
 
-```html example centered separated background="bg-light"
+```html example centered separated
 <a href="#" class="btn btn-primary">
   Loading<span class="animated-dots"></span>
 </a>
diff --git a/docs/ui/components/vector-maps.mdx b/docs/ui/components/vector-maps.mdx
index c5e010488..119bf514f 100644
--- a/docs/ui/components/vector-maps.mdx
+++ b/docs/ui/components/vector-maps.mdx
@@ -31,7 +31,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 Look at the example below to see how the vector map works with a world map.
 
-```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" background="surface" columns={2} centered
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" columns={2} centered
 <div class="card">
   <div class="card-body">
     <div class="ratio ratio-16x9">
@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
 
-```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" background="surface" columns={2} centered
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" columns={2} centered
 <div class="card">
   <div class="card-body">
     <div class="ratio ratio-16x9">
diff --git a/docs/ui/forms/form-color-check.mdx b/docs/ui/forms/form-color-check.mdx
index 875ca509e..30bc78b79 100644
--- a/docs/ui/forms/form-color-check.mdx
+++ b/docs/ui/forms/form-color-check.mdx
@@ -15,7 +15,7 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 There is also an example of a color input:
 
-```html example centered background="bg-light"
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -98,7 +98,7 @@ There is also an example of a color input:
 If you need to select only one color, you can use the radio input type:
 
 
-```html example centered background="bg-light"
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
diff --git a/docs/ui/forms/form-validation.mdx b/docs/ui/forms/form-validation.mdx
index 866224c3a..ee9bacd52 100644
--- a/docs/ui/forms/form-validation.mdx
+++ b/docs/ui/forms/form-validation.mdx
@@ -10,7 +10,7 @@ To inform users whether the entered value is correct or not, use either of the v
 
 To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
 
-```html example centered separated columns="1" background="bg-light" height="20rem"
+```html example centered separated columns="1" height="20rem"
 <input type="text" class="form-control is-valid" placeholder="Valid State..." />
 <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
 ```
@@ -26,7 +26,7 @@ To provide users with additional information about the validation state, you can
 
 This is how it works in the example below:
 
-```html example centered columns="1" background="bg-light" height="20rem"
+```html example centered columns="1" height="20rem"
 <div>
   <label class="form-label required">City</label>
   <input type="text" class="form-control is-invalid" required>
@@ -38,7 +38,7 @@ This is how it works in the example below:
 
 You can also use the `.valid-feedback` to provide users with positive feedback.
 
-```html example centered columns="1" background="bg-light" height="20rem"
+```html example centered columns="1" height="20rem"
 <div>
   <label class="form-label required">City</label>
   <input type="text" class="form-control is-valid" value="Warsaw">
@@ -60,7 +60,7 @@ To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
 
 Look how it works in the example below:
 
-```html example centered separated vertical columns="1" background="bg-light" height="20rem"
+```html example centered separated vertical columns="1" height="20rem"
 <input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
 <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
 ```
diff --git a/docs/ui/layout/navbars.mdx b/docs/ui/layout/navbars.mdx
index b9970d0e5..95ccf34ab 100644
--- a/docs/ui/layout/navbars.mdx
+++ b/docs/ui/layout/navbars.mdx
@@ -22,7 +22,7 @@ To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that
 
 The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
 
-```html example fullpage vcentered background="surface" padding={0} height="20rem"
+```html example fullpage vcentered padding={0} height="20rem"
 <header class="navbar navbar-expand-md d-print-none">
   <div class="container-xl">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/docs/ui/layout/page-layouts.mdx b/docs/ui/layout/page-layouts.mdx
index 5e50232ae..82682584c 100644
--- a/docs/ui/layout/page-layouts.mdx
+++ b/docs/ui/layout/page-layouts.mdx
@@ -12,7 +12,7 @@ description: Learn to design dashboard layouts.
 
 To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
 
-```html example fullpage resizable height="30rem" background="surface"
+```html example fullpage resizable height="30rem"
 <div class="page">
   <header class="navbar navbar-expand-sm navbar-light d-print-none">
     <div class="container-xl">
@@ -69,7 +69,7 @@ To create a sample version of the dashboard, you can use the following code snip
 
 To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
 
-```html example fullpage resizable height="30rem" background="surface"
+```html example fullpage resizable height="30rem"
 <div class="page">
   <!-- Sidebar -->
   <aside class="navbar navbar-vertical navbar-expand-sm" data-bs-theme="dark">
diff --git a/docs/ui/plugins/payments.mdx b/docs/ui/plugins/payments.mdx
index fe5d46c0d..54e0537e2 100644
--- a/docs/ui/plugins/payments.mdx
+++ b/docs/ui/plugins/payments.mdx
@@ -19,7 +19,7 @@ You can also include plugin via CDN:
 
 To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
 
-```html example plugins="payments" separated centered background="bg-light"
+```html example plugins="payments" separated centered
 <span class="payment payment-provider-shopify"></span>
 <span class="payment payment-provider-visa"></span>
 <span class="payment payment-provider-paypal"></span>
@@ -29,7 +29,7 @@ To create a payment provider icon, add the `payment` class to a component and sp
 
 Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
 
-```html example plugins="payments" separated centered background="bg-light"
+```html example plugins="payments" separated centered
 <span class="payment payment-xl payment-provider-shopify"></span>
 <span class="payment payment-lg payment-provider-visa"></span>
 <span class="payment payment-md payment-provider-paypal"></span>