Update code snippets in documentation to remove unnecessary background attributes

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 {

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>

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>
 ```

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>

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">

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>

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" />

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">

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>

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">