@solid-design-system/styles 7.0.0-next.1 → 7.0.0-next.11

package/dist/modules/list.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-list:not(.sd-list--icon), .sd-prose > :is(ol, ul) {
@@ -81,7 +81,7 @@
   list-style-type: '';
 }
 .sd-list--icon > li:first-of-type {
-    padding-top: calc(var(--sd-spacing-1) * 0);
+    padding-top: 0;
   }
 .sd-list--icon li {
     position: relative;
@@ -92,7 +92,7 @@
   }
 .sd-list--icon li > sd-icon:first-of-type, .sd-list--icon li > .sd-list--icon__icon:first-of-type {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       font-size: var(--sd-text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
       color: rgb(var(--sd-color-icon-fill-primary));
@@ -102,7 +102,7 @@
   }
 .sd-list--icon.sd-list--horizontal li {
       display: flex;
-      padding-top: calc(var(--sd-spacing-1) * 0);
+      padding-top: 0;
     }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
       margin-right: var(--sd-spacing-8);

package/dist/modules/mark.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 mark.sd-mark {
   background-color: transparent;

package/dist/modules/media.css

@@ -1,7 +1,7 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 .sd-prose figure, figure.sd-media {
-  margin: calc(var(--sd-spacing-1) * 0);
+  margin: 0;
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
     color: rgba(var(--sd-color-text-neutral-700));

package/dist/modules/meta.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-meta {

package/dist/modules/pagination.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-pagination > :not(ul) {

package/dist/modules/paragraph.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-paragraph, .sd-prose p {

package/dist/modules/prose.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-display {
@@ -78,7 +78,7 @@
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-1) * 0)
+        margin-top: 0
     }
       }
 .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
@@ -337,7 +337,7 @@
   list-style-type: '';
 }
 .sd-list--icon > li:first-of-type {
-    padding-top: calc(var(--sd-spacing-1) * 0);
+    padding-top: 0;
   }
 .sd-list--icon li {
     position: relative;
@@ -348,7 +348,7 @@
   }
 .sd-list--icon li > sd-icon:first-of-type, .sd-list--icon li > .sd-list--icon__icon:first-of-type {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       font-size: var(--sd-text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
       color: rgb(var(--sd-color-icon-fill-primary));
@@ -358,7 +358,7 @@
   }
 .sd-list--icon.sd-list--horizontal li {
       display: flex;
-      padding-top: calc(var(--sd-spacing-1) * 0);
+      padding-top: 0;
     }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
       margin-right: var(--sd-spacing-8);
@@ -391,7 +391,7 @@
   color: rgba(var(--sd-color-text-white));
 }
 .sd-prose figure, figure.sd-media {
-  margin: calc(var(--sd-spacing-1) * 0);
+  margin: 0;
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
     color: rgba(var(--sd-color-text-neutral-700));
@@ -437,13 +437,13 @@
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-      right: calc(var(--sd-spacing-1) * 0);
-      left: calc(var(--sd-spacing-1) * 0);
+      right: 0;
+      left: 0;
       height: var(--sd-spacing-2\.5);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       display: block;
       height: 1px;
       width: 100%;
@@ -454,8 +454,8 @@
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-      top: calc(var(--sd-spacing-1) * 0);
-      bottom: calc(var(--sd-spacing-1) * 0);
+      top: 0;
+      bottom: 0;
       width: var(--sd-spacing-2\.5);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {
@@ -500,8 +500,8 @@
   all: unset;
   display: table;
   border-collapse: collapse;
-  --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
-  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 .sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
@@ -515,7 +515,7 @@
     margin-top: var(--sd-spacing-4);
   }
 .sd-prose > *:first-child {
-    margin-top: calc(var(--sd-spacing-1) * 0);
+    margin-top: 0;
   }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
     margin-top: var(--sd-spacing-2);
@@ -527,7 +527,7 @@
     margin-top: var(--sd-spacing-6);
   }
 .sd-prose hr {
-    height: calc(var(--sd-spacing-1) * 0);
+    height: 0;
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
     border-color: rgba(var(--sd-color-border-neutral-500));
@@ -548,7 +548,7 @@
         display: inline;
       }
 .sd-prose > :is(ul, ol):not(#_) {
-    padding-block: calc(var(--sd-spacing-1) * 0);
+    padding-block: 0;
   }
 .sd-prose--inverted hr {
       border-color: rgba(var(--sd-color-border-white));

package/dist/modules/status-badge.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 .sd-status-badge {
   display: inline-flex;
@@ -14,7 +14,7 @@
     color: rgba(var(--sd-color-text-white)) !important;
   }
 .sd-status-badge--success sd-icon {
-      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-success))));
+      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-accent-550))));
     }
 .sd-status-badge--warning sd-icon {
       background-color: rgba(var(--sd-color-background-warning));

package/dist/modules/table-cell.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-prose td, .sd-prose th, .sd-table-cell {
@@ -36,13 +36,13 @@
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-      right: calc(var(--sd-spacing-1) * 0);
-      left: calc(var(--sd-spacing-1) * 0);
+      right: 0;
+      left: 0;
       height: var(--sd-spacing-2\.5);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       display: block;
       height: 1px;
       width: 100%;
@@ -53,8 +53,8 @@
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-      top: calc(var(--sd-spacing-1) * 0);
-      bottom: calc(var(--sd-spacing-1) * 0);
+      top: 0;
+      bottom: 0;
       width: var(--sd-spacing-2\.5);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {

package/dist/modules/table.css

@@ -1,12 +1,12 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-table, .sd-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
-  --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
-  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 .sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {

package/dist/solid-styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-chip {
@@ -9,30 +9,96 @@
   border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
   border-style: var(--tw-border-style);
   border-width: 1px;
-  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
-  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
+  border-width: var(--sd-chip-border-width, 0);
+  border-color: rgba(var(--sd-chip--primary-subtle-color-filled-border, rgba(255, 255, 255, 0)));
+  background-color: rgba(var(--sd-chip--primary-subtle-color-background, rgba(var(--sd-color-primary-100))));
   padding-inline: var(--sd-spacing-2);
+  font-size: var(--sd-marker-font-size, 0.875rem);
+  font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
   white-space: nowrap;
   color: rgba(var(--sd-color-text-black));
 }
-.sd-chip--primary-500 {
-    border-color: rgba(var(--sd-chip--primary-500-color-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--primary-500-color-background, rgba(var(--sd-color-primary-500))));
-    color: rgba(var(--sd-chip--primary-500-color-text, rgba(var(--sd-color-white))));
+.sd-chip--size-lg {
+    height: var(--sd-spacing-8);
+    padding-inline: var(--sd-spacing-3);
+  }
+.sd-chip--sharp {
+    border-radius: var(--sd-radius-none);
+  }
+.sd-chip--shade-low {
+    border-color: rgba(var(--sd-chip--primary-low-color-filled-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-low-color-background, rgba(var(--sd-color-primary-200))));
+  }
+.sd-chip--shade-medium {
+    border-color: rgba(var(--sd-chip--primary-medium-color-filled-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-medium-color-background, rgba(var(--sd-color-primary-300))));
   }
-.sd-chip--primary-300 {
-    border-color: rgba(var(--sd-chip--primary-300-color-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-chip--primary-300-color-background, rgba(var(--sd-color-primary-300))));
+.sd-chip--shade-high {
+    border-color: rgba(var(--sd-chip--primary-high-color-filled-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-high-color-background, rgba(var(--sd-color-primary-400))));
   }
-.sd-chip--white {
-    border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
+.sd-chip--shade-none {
+    border-color: transparent;
+    background-color: transparent;
+  }
+.sd-chip--color-neutral {
+    border-color: rgba(var(--sd-chip--neutral-subtle-color-filled-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--neutral-subtle-color-background, rgba(var(--sd-color-neutral-100))));
+  }
+.sd-chip--color-neutral.sd-chip--shade-low {
+      border-color: rgba(var(--sd-chip--neutral-low-color-filled-border, rgba(255, 255, 255, 0)));
+      background-color: rgba(var(--sd-chip--neutral-low-color-background, rgba(var(--sd-color-neutral-200))));
+    }
+.sd-chip--color-neutral.sd-chip--shade-medium {
+      border-color: rgba(var(--sd-chip--neutral-medium-color-filled-border, rgba(255, 255, 255, 0)));
+      background-color: rgba(var(--sd-chip--neutral-medium-color-background, rgba(var(--sd-color-neutral-300))));
+    }
+.sd-chip--color-neutral.sd-chip--shade-high {
+      border-color: rgba(var(--sd-chip--neutral-high-color-filled-border, rgba(255, 255, 255, 0)));
+      background-color: rgba(var(--sd-chip--neutral-high-color-background, rgba(var(--sd-color-neutral-400))));
+    }
+.sd-chip--color-neutral.sd-chip--shade-none {
+      border-color: transparent;
+      background-color: transparent;
+    }
+.sd-chip--color-white {
+    border-color: rgba(var(--sd-chip--white-color-filled-border, rgba(255, 255, 255, 0)));
     background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
   }
-.sd-chip{
-  font-size: var(--sd-chip-font-size);
-  border-width: var(--sd-chip-border-width);
-  font-weight: var(--sd-chip-font-weight);
-}
+.sd-chip--outline {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: rgba(var(--sd-chip--primary-low-color-border, rgba(var(--sd-color-primary-200))));
+    background-color: rgba(var(--sd-chip--primary-low-color-outline-fill, rgba(255, 255, 255, 0)));
+  }
+.sd-chip--outline.sd-chip--shade-low {
+      border-color: rgba(var(--sd-chip--primary-medium-color-border, rgba(var(--sd-color-primary-300))));
+      background-color: rgba(var(--sd-chip--primary-medium-color-outline-fill, rgba(255, 255, 255, 0)));
+    }
+.sd-chip--outline.sd-chip--shade-medium {
+      border-color: rgba(var(--sd-chip--primary-high-color-border, rgba(var(--sd-color-primary-400))));
+      background-color: rgba(var(--sd-chip--primary-high-color-outline-fill, rgba(255, 255, 255, 0)));
+    }
+.sd-chip--outline.sd-chip--shade-high {
+      border-color: rgba(var(--sd-chip--primary-strong-color-border, rgba(var(--sd-color-primary-500))));
+      background-color: rgba(var(--sd-chip--primary-strong-color-outline-fill, rgba(255, 255, 255, 0)));
+    }
+.sd-chip--outline.sd-chip--color-neutral {
+      border-color: rgba(var(--sd-chip--neutral-low-color-border, rgba(var(--sd-color-neutral-200))));
+      background-color: rgba(var(--sd-chip--neutral-low-color-outline-fill, rgba(255, 255, 255, 0)));
+    }
+.sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-low {
+        border-color: rgba(var(--sd-chip--neutral-medium-color-border, rgba(var(--sd-color-neutral-300))));
+        background-color: rgba(var(--sd-chip--neutral-medium-color-outline-fill, rgba(255, 255, 255, 0)));
+      }
+.sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-medium {
+        border-color: rgba(var(--sd-chip--neutral-high-color-border, rgba(var(--sd-color-neutral-400))));
+        background-color: rgba(var(--sd-chip--neutral-high-color-outline-fill, rgba(255, 255, 255, 0)));
+      }
+.sd-chip--outline.sd-chip--color-neutral.sd-chip--shade-high {
+        border-color: rgba(var(--sd-chip--neutral-strong-color-border, rgba(var(--sd-color-neutral-500))));
+        background-color: rgba(var(--sd-chip--neutral-strong-color-outline-fill, rgba(255, 255, 255, 0)));
+      }
 .sd-container {
   position: relative;
   background-color: rgba(var(--sd-color-background-neutral-100));
@@ -75,22 +141,22 @@
     content: '';
   }
 .sd-container--triangle-top::before {
-    top: calc(var(--sd-spacing-1) * 0);
+    top: 0;
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
   }
 .sd-container--triangle-right::before {
-    right: calc(var(--sd-spacing-1) * 0);
+    right: 0;
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
   }
 .sd-container--triangle-bottom::before {
-    bottom: calc(var(--sd-spacing-1) * 0);
+    bottom: 0;
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
   }
 .sd-container--triangle-left::before {
-    left: calc(var(--sd-spacing-1) * 0);
+    left: 0;
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
   }
@@ -165,8 +231,8 @@
 }
 .sd-copyright::after {
     position: absolute;
-    bottom: calc(var(--sd-spacing-1) * 0);
-    left: calc(var(--sd-spacing-1) * 0);
+    bottom: 0;
+    left: 0;
     display: block;
     width: 100%;
     padding-bottom: var(--sd-spacing-2);
@@ -184,8 +250,8 @@
         width: max-content;
         padding-top: var(--sd-spacing-2);
         padding-right: var(--sd-spacing-1);
-        padding-bottom: calc(var(--sd-spacing-1) * 0);
-        padding-left: calc(var(--sd-spacing-1) * 0);
+        padding-bottom: 0;
+        padding-left: 0;
         writing-mode: vertical-rl;
         text-orientation: sideways-right;
         transform: rotate(180deg);
@@ -199,49 +265,17 @@
     }
 .sd-copyright--placement-top::after {
         position: absolute;
-        top: calc(var(--sd-spacing-1) * 0);
-        right: calc(var(--sd-spacing-1) * 0);
+        top: 0;
+        right: 0;
         display: block;
         max-height: -moz-fit-content;
         max-height: fit-content;
         padding-top: var(--sd-spacing-2);
         padding-right: var(--sd-spacing-4);
       }
-.sd-flag {
-  display: inline-flex;
-  height: var(--sd-spacing-8);
-  align-items: center;
-  overflow: hidden;
-  border-radius: var(--sd-flag-border-radius, 0);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: rgba(var(--sd-flag--neutral-200-color-border, rgba(255, 255, 255, 0)));
-  background-color: rgba(var(--sd-flag--neutral-200-color-background, rgba(var(--sd-color-neutral-200))));
-  padding-inline: var(--sd-spacing-3);
-  font-size: var(--sd-marker-font-size, 0.875rem);
-  font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
-  white-space: nowrap;
-  color: rgba(var(--sd-color-text-black));
-}
-.sd-flag--neutral-500 {
-    border-color: rgba(var(--sd-flag--neutral-500-color-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-flag--neutral-500-color-background, rgba(var(--sd-color-neutral-500))));
-    color: rgba(var(--sd-color-text-black));
-  }
-.sd-flag--neutral-300 {
-    border-color: rgba(var(--sd-flag--neutral-300-color-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-flag--neutral-300-color-background, rgba(var(--sd-color-neutral-300))));
-  }
-.sd-flag--white {
-    border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
-    background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
-  }
-.sd-flag{
-  border-width: var(--sd-flag-border-width);
-}
 .sd-footnotes {
-  margin-block: calc(var(--sd-spacing-1) * 0);
-  padding: calc(var(--sd-spacing-1) * 0);
+  margin-block: 0;
+  padding: 0;
   text-align: left;
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
@@ -279,7 +313,7 @@
         }
 .sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker::before {
             position: relative;
-            left: calc(var(--sd-spacing-1) * 0);
+            left: 0;
             vertical-align: super;
             --tw-leading: var(--leading-normal, 1.5);
             line-height: var(--leading-normal, 1.5);
@@ -288,7 +322,7 @@
             content: counter(footnotes-multiple, lower-alpha);
           }
 .sd-footnotes:is(ol) li .sd-footnotes--marker {
-        bottom: calc(var(--sd-spacing-1) * 0);
+        bottom: 0;
         display: block;
       }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible {
@@ -720,7 +754,7 @@ mark.sd-mark {
     color: rgba(var(--sd-color-text-white)) !important;
   }
 .sd-status-badge--success sd-icon {
-      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-success))));
+      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-accent-550))));
     }
 .sd-status-badge--warning sd-icon {
       background-color: rgba(var(--sd-color-background-warning));
@@ -808,7 +842,7 @@ mark.sd-mark {
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-1) * 0)
+        margin-top: 0
     }
       }
 .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
@@ -1067,7 +1101,7 @@ mark.sd-mark {
   list-style-type: '';
 }
 .sd-list--icon > li:first-of-type {
-    padding-top: calc(var(--sd-spacing-1) * 0);
+    padding-top: 0;
   }
 .sd-list--icon li {
     position: relative;
@@ -1078,7 +1112,7 @@ mark.sd-mark {
   }
 .sd-list--icon li > sd-icon:first-of-type, .sd-list--icon li > .sd-list--icon__icon:first-of-type {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       font-size: var(--sd-text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
       color: rgb(var(--sd-color-icon-fill-primary));
@@ -1088,7 +1122,7 @@ mark.sd-mark {
   }
 .sd-list--icon.sd-list--horizontal li {
       display: flex;
-      padding-top: calc(var(--sd-spacing-1) * 0);
+      padding-top: 0;
     }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
       margin-right: var(--sd-spacing-8);
@@ -1121,7 +1155,7 @@ mark.sd-mark {
   color: rgba(var(--sd-color-text-white));
 }
 .sd-prose figure, figure.sd-media {
-  margin: calc(var(--sd-spacing-1) * 0);
+  margin: 0;
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
     color: rgba(var(--sd-color-text-neutral-700));
@@ -1167,13 +1201,13 @@ mark.sd-mark {
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-      right: calc(var(--sd-spacing-1) * 0);
-      left: calc(var(--sd-spacing-1) * 0);
+      right: 0;
+      left: 0;
       height: var(--sd-spacing-2\.5);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
-      left: calc(var(--sd-spacing-1) * 0);
+      left: 0;
       display: block;
       height: 1px;
       width: 100%;
@@ -1184,8 +1218,8 @@ mark.sd-mark {
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-      top: calc(var(--sd-spacing-1) * 0);
-      bottom: calc(var(--sd-spacing-1) * 0);
+      top: 0;
+      bottom: 0;
       width: var(--sd-spacing-2\.5);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {
@@ -1230,8 +1264,8 @@ mark.sd-mark {
   all: unset;
   display: table;
   border-collapse: collapse;
-  --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
-  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 .sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
@@ -1245,7 +1279,7 @@ mark.sd-mark {
     margin-top: var(--sd-spacing-4);
   }
 .sd-prose > *:first-child {
-    margin-top: calc(var(--sd-spacing-1) * 0);
+    margin-top: 0;
   }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
     margin-top: var(--sd-spacing-2);
@@ -1257,7 +1291,7 @@ mark.sd-mark {
     margin-top: var(--sd-spacing-6);
   }
 .sd-prose hr {
-    height: calc(var(--sd-spacing-1) * 0);
+    height: 0;
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
     border-color: rgba(var(--sd-color-border-neutral-500));
@@ -1278,7 +1312,7 @@ mark.sd-mark {
         display: inline;
       }
 .sd-prose > :is(ul, ol):not(#_) {
-    padding-block: calc(var(--sd-spacing-1) * 0);
+    padding-block: 0;
   }
 .sd-prose--inverted hr {
       border-color: rgba(var(--sd-color-border-white));