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

package/dist-versioned/modules/chip.css

@@ -1,25 +1,25 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-chip {
+.sd-6-0-0-next-11-chip {
   display: inline-flex;
   height: var(--sd-spacing-6);
   align-items: center;
   overflow: hidden;
   border-radius: var(--sd-radius);
-  background-color: var(--sd-color-background-primary-200);
+  background-color: rgba(var(--sd-color-background-primary-200));
   padding-inline: var(--sd-spacing-2);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
-  color: var(--sd-color-text-black);
+  color: rgba(var(--sd-color-text-black));
 }
-.sd-2-0-0-next-1-chip--primary-500 {
-    background-color: var(--sd-color-background-primary-500);
-    color: var(--sd-color-text-white);
+.sd-6-0-0-next-11-chip--primary-500 {
+    background-color: rgba(var(--sd-color-background-primary-500));
+    color: rgba(var(--sd-color-text-white));
   }
-.sd-2-0-0-next-1-chip--primary-300 {
-    background-color: var(--sd-color-background-primary-300);
+.sd-6-0-0-next-11-chip--primary-300 {
+    background-color: rgba(var(--sd-color-background-primary-300));
   }
-.sd-2-0-0-next-1-chip--white {
-    background-color: var(--sd-color-background-white);
+.sd-6-0-0-next-11-chip--white {
+    background-color: rgba(var(--sd-color-background-white));
   }

package/dist-versioned/modules/container.css

@@ -1,35 +1,35 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-container {
+.sd-6-0-0-next-11-container {
   position: relative;
-  background-color: var(--sd-color-background-neutral-100);
+  background-color: rgba(var(--sd-color-background-neutral-100));
   padding-inline: var(--sd-spacing-10);
   padding-block: var(--sd-spacing-8);
 }
-.sd-2-0-0-next-1-container--variant-primary-100 {
-    background-color: var(--sd-color-background-primary-100);
+.sd-6-0-0-next-11-container--variant-primary-100 {
+    background-color: rgba(var(--sd-color-background-primary-100));
   }
-.sd-2-0-0-next-1-container--variant-primary {
-    background-color: var(--sd-color-background-primary);
+.sd-6-0-0-next-11-container--variant-primary {
+    background-color: rgba(var(--sd-color-background-primary));
   }
-.sd-2-0-0-next-1-container--variant-border-neutral-400 {
+.sd-6-0-0-next-11-container--variant-border-neutral-400 {
     --tw-border-style: solid;
     border-style: solid;
-    border-color: var(--sd-color-border-neutral-400);
-    background-color: var(--sd-color-background-white);
+    border-color: rgba(var(--sd-color-border-neutral-400));
+    background-color: rgba(var(--sd-color-background-white));
     border-width: 1px;
   }
-.sd-2-0-0-next-1-container--variant-white {
-    background-color: var(--sd-color-background-white);
+.sd-6-0-0-next-11-container--variant-white {
+    background-color: rgba(var(--sd-color-background-white));
   }
-.sd-2-0-0-next-1-container--padding-sm {
+.sd-6-0-0-next-11-container--padding-sm {
     padding-inline: var(--sd-spacing-6);
     padding-block: var(--sd-spacing-4);
   }
-.sd-2-0-0-next-1-container{
-  --triangle-background: var(--sd-color-white);
+.sd-6-0-0-next-11-container{
+  --triangle-background: rgba(var(--sd-color-white));
 }
-.sd-2-0-0-next-1-container--triangle-top::before, .sd-2-0-0-next-1-container--triangle-right::before, .sd-2-0-0-next-1-container--triangle-bottom::before, .sd-2-0-0-next-1-container--triangle-left::before {
+.sd-6-0-0-next-11-container--triangle-top::before, .sd-6-0-0-next-11-container--triangle-right::before, .sd-6-0-0-next-11-container--triangle-bottom::before, .sd-6-0-0-next-11-container--triangle-left::before {
     position: absolute;
     display: block;
     --tw-border-style: solid;
@@ -38,27 +38,27 @@
     border-width: 14px;
     content: '';
   }
-.sd-2-0-0-next-1-container--triangle-top::before {
+.sd-6-0-0-next-11-container--triangle-top::before {
     top: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
   }
-.sd-2-0-0-next-1-container--triangle-right::before {
+.sd-6-0-0-next-11-container--triangle-right::before {
     right: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
   }
-.sd-2-0-0-next-1-container--triangle-bottom::before {
+.sd-6-0-0-next-11-container--triangle-bottom::before {
     bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
   }
-.sd-2-0-0-next-1-container--triangle-left::before {
+.sd-6-0-0-next-11-container--triangle-left::before {
     left: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
   }
-.sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-top-border::before, .sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-right-border::before, .sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::before, .sd-2-0-0-next-1-container--triangle-left-border::after, .sd-2-0-0-next-1-container--triangle-left-border::before {
+.sd-6-0-0-next-11-container--triangle-top-border::after, .sd-6-0-0-next-11-container--triangle-top-border::before, .sd-6-0-0-next-11-container--triangle-right-border::after, .sd-6-0-0-next-11-container--triangle-right-border::before, .sd-6-0-0-next-11-container--triangle-bottom-border::after, .sd-6-0-0-next-11-container--triangle-bottom-border::before, .sd-6-0-0-next-11-container--triangle-left-border::after, .sd-6-0-0-next-11-container--triangle-left-border::before {
       position: absolute;
       display: block;
       --tw-border-style: solid;
@@ -66,53 +66,53 @@
       border-color: transparent;
       content: '';
     }
-.sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-left-border::after {
+.sd-6-0-0-next-11-container--triangle-top-border::after, .sd-6-0-0-next-11-container--triangle-right-border::after, .sd-6-0-0-next-11-container--triangle-bottom-border::after, .sd-6-0-0-next-11-container--triangle-left-border::after {
       border-width: 14px;
     }
-.sd-2-0-0-next-1-container--triangle-top-border::before, .sd-2-0-0-next-1-container--triangle-right-border::before, .sd-2-0-0-next-1-container--triangle-bottom-border::before, .sd-2-0-0-next-1-container--triangle-left-border::before {
+.sd-6-0-0-next-11-container--triangle-top-border::before, .sd-6-0-0-next-11-container--triangle-right-border::before, .sd-6-0-0-next-11-container--triangle-bottom-border::before, .sd-6-0-0-next-11-container--triangle-left-border::before {
       border-width: 15px;
     }
-.sd-2-0-0-next-1-container--triangle-top-border::after, .sd-2-0-0-next-1-container--triangle-top-border::before {
+.sd-6-0-0-next-11-container--triangle-top-border::after, .sd-6-0-0-next-11-container--triangle-top-border::before {
       top: -1px;
     }
-.sd-2-0-0-next-1-container--triangle-top-border::before {
-      border-top-color: var(--sd-color-border-neutral-400);
+.sd-6-0-0-next-11-container--triangle-top-border::before {
+      border-top-color: rgba(var(--sd-color-border-neutral-400));
       left: calc(50% - 15px);
     }
-.sd-2-0-0-next-1-container--triangle-top-border::after {
+.sd-6-0-0-next-11-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
-.sd-2-0-0-next-1-container--triangle-right-border::after, .sd-2-0-0-next-1-container--triangle-right-border::before {
+.sd-6-0-0-next-11-container--triangle-right-border::after, .sd-6-0-0-next-11-container--triangle-right-border::before {
       right: -1px;
     }
-.sd-2-0-0-next-1-container--triangle-right-border::before {
-      border-right-color: var(--sd-color-border-neutral-400);
+.sd-6-0-0-next-11-container--triangle-right-border::before {
+      border-right-color: rgba(var(--sd-color-border-neutral-400));
       top: calc(50% - 15px);
     }
-.sd-2-0-0-next-1-container--triangle-right-border::after {
+.sd-6-0-0-next-11-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
-.sd-2-0-0-next-1-container--triangle-bottom-border::after, .sd-2-0-0-next-1-container--triangle-bottom-border::before {
+.sd-6-0-0-next-11-container--triangle-bottom-border::after, .sd-6-0-0-next-11-container--triangle-bottom-border::before {
       bottom: -1px;
     }
-.sd-2-0-0-next-1-container--triangle-bottom-border::before {
-      border-bottom-color: var(--sd-color-border-neutral-400);
+.sd-6-0-0-next-11-container--triangle-bottom-border::before {
+      border-bottom-color: rgba(var(--sd-color-border-neutral-400));
       left: calc(50% - 15px);
     }
-.sd-2-0-0-next-1-container--triangle-bottom-border::after {
+.sd-6-0-0-next-11-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
-.sd-2-0-0-next-1-container--triangle-left-border::after, .sd-2-0-0-next-1-container--triangle-left-border::before {
+.sd-6-0-0-next-11-container--triangle-left-border::after, .sd-6-0-0-next-11-container--triangle-left-border::before {
       left: -1px;
     }
-.sd-2-0-0-next-1-container--triangle-left-border::before {
-      border-left-color: var(--sd-color-border-neutral-400);
+.sd-6-0-0-next-11-container--triangle-left-border::before {
+      border-left-color: rgba(var(--sd-color-border-neutral-400));
       top: calc(50% - 15px);
     }
-.sd-2-0-0-next-1-container--triangle-left-border::after {
+.sd-6-0-0-next-11-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }

package/dist-versioned/modules/copyright.css

@@ -1,7 +1,7 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-copyright {
+.sd-6-0-0-next-11-copyright {
   position: relative;
   --tw-blur: ;
   --tw-brightness: ;
@@ -12,7 +12,7 @@
   --tw-saturate: ;
   --tw-sepia: ;
 }
-.sd-2-0-0-next-1-copyright::after {
+.sd-6-0-0-next-11-copyright::after {
     position: absolute;
     bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(var(--sd-spacing-1) * 0);
@@ -22,13 +22,13 @@
     padding-left: var(--sd-spacing-4);
     font-size: var(--sd-text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
     --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-sm));
     --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-sm));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     content: var(--copyright);
   }
-.sd-2-0-0-next-1-copyright--orientation-vertical::after {
+.sd-6-0-0-next-11-copyright--orientation-vertical::after {
         width: -moz-max-content;
         width: max-content;
         padding-top: var(--sd-spacing-2);
@@ -39,14 +39,14 @@
         text-orientation: sideways-right;
         transform: rotate(180deg);
       }
-.sd-2-0-0-next-1-copyright--color-black::after {
-        color: var(--sd-color-text-black);
+.sd-6-0-0-next-11-copyright--color-black::after {
+        color: rgba(var(--sd-color-text-black));
         filter: drop-shadow(0 0 transparent);
       }
-.sd-2-0-0-next-1-copyright--no-shadow::after {
+.sd-6-0-0-next-11-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
-.sd-2-0-0-next-1-copyright--placement-top::after {
+.sd-6-0-0-next-11-copyright--placement-top::after {
         position: absolute;
         top: calc(var(--sd-spacing-1) * 0);
         right: calc(var(--sd-spacing-1) * 0);

package/dist-versioned/modules/display.css

@@ -1,47 +1,47 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-display {
+.sd-6-0-0-next-11-display {
   font-size: var(--sd-text-3xl);
   line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
   --tw-leading: var(--leading-tight, 1.25);
   line-height: var(--leading-tight, 1.25);
   --tw-font-weight: var(--sd-font-weight-normal);
   font-weight: var(--sd-font-weight-normal);
-  color: var(--sd-color-text-black);
+  color: rgba(var(--sd-color-text-black));
 }
 @media (width >= 64rem) {
-.sd-2-0-0-next-1-display {
+.sd-6-0-0-next-11-display {
     font-size: var(--sd-text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
   }
-.sd-2-0-0-next-1-display--size-xl {
+.sd-6-0-0-next-11-display--size-xl {
       font-size: var(--sd-text-xl);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
       --tw-leading: var(--leading-tight, 1.25);
       line-height: var(--leading-tight, 1.25);
       --tw-font-weight: var(--sd-font-weight-normal);
       font-weight: var(--sd-font-weight-normal);
-      color: var(--sd-color-text-black);
+      color: rgba(var(--sd-color-text-black));
     }
-.sd-2-0-0-next-1-display--size-3xl {
+.sd-6-0-0-next-11-display--size-3xl {
       font-size: var(--sd-text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
       --tw-leading: var(--leading-tight, 1.25);
       line-height: var(--leading-tight, 1.25);
       --tw-font-weight: var(--sd-font-weight-normal);
       font-weight: var(--sd-font-weight-normal);
-      color: var(--sd-color-text-black);
+      color: rgba(var(--sd-color-text-black));
     }
 @media (width >= 64rem) {
-.sd-2-0-0-next-1-display--size-3xl {
+.sd-6-0-0-next-11-display--size-3xl {
         font-size: var(--sd-text-3xl);
         line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
     }
       }
-.sd-2-0-0-next-1-display--inverted {
-    color: var(--sd-color-text-white);
+.sd-6-0-0-next-11-display--inverted {
+    color: rgba(var(--sd-color-text-white));
   }
 @property --tw-leading {
   syntax: "*";

package/dist-versioned/modules/flag.css

@@ -1,24 +1,24 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-flag {
+.sd-6-0-0-next-11-flag {
   display: inline-flex;
   height: var(--sd-spacing-8);
   align-items: center;
   overflow: hidden;
-  background-color: var(--sd-color-background-neutral-200);
+  background-color: rgba(var(--sd-color-background-neutral-200));
   padding-inline: var(--sd-spacing-3);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
-  color: var(--sd-color-text-black);
+  color: rgba(var(--sd-color-text-black));
 }
-.sd-2-0-0-next-1-flag--neutral-500 {
-    background-color: var(--sd-flag--neutral-500-color-background, var(--sd-color-neutral-500));
-    color: var(--sd-color-text-black);
+.sd-6-0-0-next-11-flag--neutral-500 {
+    background-color: rgba(var(--sd-flag--neutral-500-color-background, rgba(var(--sd-color-neutral-500))));
+    color: rgba(var(--sd-color-text-black));
   }
-.sd-2-0-0-next-1-flag--neutral-300 {
-    background-color: var(--sd-color-background-neutral-300);
+.sd-6-0-0-next-11-flag--neutral-300 {
+    background-color: rgba(var(--sd-color-background-neutral-300));
   }
-.sd-2-0-0-next-1-flag--white {
-    background-color: var(--sd-color-background-white);
+.sd-6-0-0-next-11-flag--white {
+    background-color: rgba(var(--sd-color-background-white));
   }

package/dist-versioned/modules/footnotes.css

@@ -1,26 +1,26 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-2-0-0-next-1-footnotes {
+.sd-6-0-0-next-11-footnotes {
   margin-block: calc(var(--sd-spacing-1) * 0);
   padding: calc(var(--sd-spacing-1) * 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)));
-  color: var(--sd-color-text-neutral-700);
+  color: rgba(var(--sd-color-text-neutral-700));
 }
-.sd-2-0-0-next-1-footnotes :target {
-    background-color: var(--sd-color-background-neutral-200);
+.sd-6-0-0-next-11-footnotes :target {
+    background-color: rgba(var(--sd-color-background-neutral-200));
   }
-.sd-2-0-0-next-1-footnotes:is(ol) {
+.sd-6-0-0-next-11-footnotes:is(ol) {
     padding-inline-start: var(--sd-spacing-8);
   }
-.sd-2-0-0-next-1-footnotes:is(ol) li {
+.sd-6-0-0-next-11-footnotes:is(ol) li {
       counter-increment: list-item;
       position: relative;
       list-style-type: none;
     }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2))::before, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker))::before {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker::before, .sd-6-0-0-next-11-footnotes:is(ol) li:has(.sd-6-0-0-next-11-footnotes--marker:nth-of-type(2))::before, .sd-6-0-0-next-11-footnotes:is(ol) li:not(:has(.sd-6-0-0-next-11-footnotes--marker))::before {
           position: absolute;
           left: calc(var(--sd-spacing-8) * -1);
           flex-shrink: 0;
@@ -32,14 +32,14 @@
           padding-top: 1px;
           font-size: 10px;
         }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker::after, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2))::after, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker))::after {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker::after, .sd-6-0-0-next-11-footnotes:is(ol) li:has(.sd-6-0-0-next-11-footnotes--marker:nth-of-type(2))::after, .sd-6-0-0-next-11-footnotes:is(ol) li:not(:has(.sd-6-0-0-next-11-footnotes--marker))::after {
           content: none;
         }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker .sd-2-0-0-next-1-footnotes--marker, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2)) .sd-2-0-0-next-1-footnotes--marker, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker)) .sd-2-0-0-next-1-footnotes--marker {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker .sd-6-0-0-next-11-footnotes--marker, .sd-6-0-0-next-11-footnotes:is(ol) li:has(.sd-6-0-0-next-11-footnotes--marker:nth-of-type(2)) .sd-6-0-0-next-11-footnotes--marker, .sd-6-0-0-next-11-footnotes:is(ol) li:not(:has(.sd-6-0-0-next-11-footnotes--marker)) .sd-6-0-0-next-11-footnotes--marker {
           display: inline-block;
           counter-increment: footnotes-multiple;
         }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:has(.sd-2-0-0-next-1-footnotes--marker:nth-of-type(2)) .sd-2-0-0-next-1-footnotes--marker::before, .sd-2-0-0-next-1-footnotes:is(ol) li:not(:has(.sd-2-0-0-next-1-footnotes--marker)) .sd-2-0-0-next-1-footnotes--marker::before {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker .sd-6-0-0-next-11-footnotes--marker::before, .sd-6-0-0-next-11-footnotes:is(ol) li:has(.sd-6-0-0-next-11-footnotes--marker:nth-of-type(2)) .sd-6-0-0-next-11-footnotes--marker::before, .sd-6-0-0-next-11-footnotes:is(ol) li:not(:has(.sd-6-0-0-next-11-footnotes--marker)) .sd-6-0-0-next-11-footnotes--marker::before {
             position: relative;
             left: calc(var(--sd-spacing-1) * 0);
             vertical-align: super;
@@ -49,15 +49,15 @@
             font-weight: var(--sd-font-weight-bold);
             content: counter(footnotes-multiple, lower-alpha);
           }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker {
         bottom: calc(var(--sd-spacing-1) * 0);
         display: block;
       }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker:focus-visible {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker:focus-visible {
           outline-style: var(--tw-outline-style);
           outline-width: 0px;
         }
-.sd-2-0-0-next-1-footnotes:is(ol) li .sd-2-0-0-next-1-footnotes--marker:focus-visible::before {
+.sd-6-0-0-next-11-footnotes:is(ol) li .sd-6-0-0-next-11-footnotes--marker:focus-visible::before {
             border-radius: var(--sd-radius);
             outline-width: 1px;
             outline-style: var(--tw-outline-style);
@@ -65,27 +65,27 @@
             outline-offset: 2px;
             outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
           }
-.sd-2-0-0-next-1-footnotes:is(ul) {
+.sd-6-0-0-next-11-footnotes:is(ul) {
     list-style: '';
   }
-.sd-2-0-0-next-1-footnotes--inverted {
-    color: var(--sd-color-text-primary-400);
+.sd-6-0-0-next-11-footnotes--inverted {
+    color: rgba(var(--sd-color-text-primary-400));
   }
-.sd-2-0-0-next-1-footnotes--inverted :target {
-      background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+.sd-6-0-0-next-11-footnotes--inverted :target {
+      background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
     }
-.sd-2-0-0-next-1-footnotes--inverted .sd-2-0-0-next-1-footnotes--marker::before {
-      color: var(--sd-color-text-white);
+.sd-6-0-0-next-11-footnotes--inverted .sd-6-0-0-next-11-footnotes--marker::before {
+      color: rgba(var(--sd-color-text-white));
       outline-color: var(--color-white, #fff) !important;
     }
-.sd-2-0-0-next-1-footnotes--inverted:is(.sd-2-0-0-next-1-footnotes--marker) {
-      color: var(--sd-color-text-white) !important;
+.sd-6-0-0-next-11-footnotes--inverted:is(.sd-6-0-0-next-11-footnotes--marker) {
+      color: rgba(var(--sd-color-text-white)) !important;
       outline-color: var(--color-white, #fff) !important;
     }
-.sd-2-0-0-next-1-footnotes--inverted:is(.sd-2-0-0-next-1-footnotes--marker):target {
-        background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+.sd-6-0-0-next-11-footnotes--inverted:is(.sd-6-0-0-next-11-footnotes--marker):target {
+        background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
       }
-.sd-2-0-0-next-1-footnotes--marker {
+.sd-6-0-0-next-11-footnotes--marker {
     position: relative;
     bottom: var(--sd-spacing-2);
     display: inline-block;
@@ -95,33 +95,33 @@
     text-decoration-line: none !important;
     font-size: x-small;
   }
-.sd-2-0-0-next-1-footnotes--marker:target {
-      background-color: var(--sd-color-background-neutral-200);
+.sd-6-0-0-next-11-footnotes--marker:target {
+      background-color: rgba(var(--sd-color-background-neutral-200));
     }
-.sd-2-0-0-next-1-footnotes--marker:not(:has(a))::before {
+.sd-6-0-0-next-11-footnotes--marker:not(:has(a))::before {
         content: '[ ';
         display: inline-block;
       }
-.sd-2-0-0-next-1-footnotes--marker:not(:has(a))::after {
+.sd-6-0-0-next-11-footnotes--marker:not(:has(a))::after {
         content: ' ]';
         display: inline-block;
       }
-.sd-2-0-0-next-1-footnotes--marker :is(a) {
+.sd-6-0-0-next-11-footnotes--marker :is(a) {
       display: inline-block;
       --tw-font-weight: var(--sd-font-weight-bold);
       font-weight: var(--sd-font-weight-bold);
       white-space: nowrap;
       text-decoration-line: none !important;
     }
-.sd-2-0-0-next-1-footnotes--marker :is(a)::before {
+.sd-6-0-0-next-11-footnotes--marker :is(a)::before {
         content: '[ ';
         display: inline-block;
       }
-.sd-2-0-0-next-1-footnotes--marker :is(a)::after {
+.sd-6-0-0-next-11-footnotes--marker :is(a)::after {
         content: ' ]';
         display: inline-block;
       }
-.sd-2-0-0-next-1-footnotes--marker :is(a):focus-visible {
+.sd-6-0-0-next-11-footnotes--marker :is(a):focus-visible {
         border-radius: var(--sd-radius);
         outline-width: 1px;
         outline-style: var(--tw-outline-style);
@@ -129,13 +129,13 @@
         outline-offset: 2px;
         outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
       }
-.sd-2-0-0-next-1-footnotes--marker :is(a):link {
-        color: var(--sd-color-text-primary);
+.sd-6-0-0-next-11-footnotes--marker :is(a):link {
+        color: rgba(var(--sd-color-text-primary));
       }
-.sd-2-0-0-next-1-footnotes--marker:link, .sd-2-0-0-next-1-footnotes--marker:visited {
-      color: var(--sd-color-text-primary);
+.sd-6-0-0-next-11-footnotes--marker:link, .sd-6-0-0-next-11-footnotes--marker:visited {
+      color: rgba(var(--sd-color-text-primary));
     }
-.sd-2-0-0-next-1-footnotes--marker:focus-visible {
+.sd-6-0-0-next-11-footnotes--marker:focus-visible {
       border-radius: var(--sd-radius);
       outline-width: 1px;
       outline-style: var(--tw-outline-style);