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

package/dist/modules/interactive.css

@@ -7,7 +7,7 @@
   }
 .sd-prose a, .sd-interactive{
   cursor: pointer;
-  color: var(--sd-color-text-primary);
+  color: rgba(var(--sd-color-text-primary));
   text-decoration-line: underline;
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
@@ -18,7 +18,7 @@
   transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
 .sd-prose a:hover:not([disabled]), .sd-interactive:hover:not([disabled]) {
-    color: var(--sd-color-text-primary-500);
+    color: rgba(var(--sd-color-text-primary-500));
   }
 .sd-prose a:focus-visible, .sd-interactive:focus-visible {
     outline-style: solid;
@@ -27,35 +27,35 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
-    color: var(--sd-interactive--active-color-text, var(--sd-color-primary-800));
+    color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
   }
 .sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
     text-decoration-line: none;
   }
 .sd-prose a--disabled, .sd-prose a[disabled], .sd-prose a[href=''], .sd-interactive--disabled, .sd-interactive[disabled], .sd-interactive[href=''] {
     cursor: not-allowed;
-    color: var(--sd-color-text-neutral-500);
+    color: rgba(var(--sd-color-text-neutral-500));
   }
 .sd-prose a--disabled:hover:not([disabled]), .sd-prose a[disabled]:hover:not([disabled]), .sd-prose a[href='']:hover:not([disabled]), .sd-interactive--disabled:hover:not([disabled]), .sd-interactive[disabled]:hover:not([disabled]), .sd-interactive[href='']:hover:not([disabled]) {
-      color: var(--sd-color-text-neutral-500);
+      color: rgba(var(--sd-color-text-neutral-500));
     }
 .sd-prose a--disabled:active:not([disabled]), .sd-prose a[disabled]:active:not([disabled]), .sd-prose a[href='']:active:not([disabled]), .sd-interactive--disabled:active:not([disabled]), .sd-interactive[disabled]:active:not([disabled]), .sd-interactive[href='']:active:not([disabled]) {
-      color: var(--sd-color-text-neutral-500);
+      color: rgba(var(--sd-color-text-neutral-500));
     }
 .sd-prose a--disabled.sd-interactive--inverted, .sd-prose a[disabled].sd-interactive--inverted, .sd-prose a[href=''].sd-interactive--inverted, .sd-interactive--disabled.sd-interactive--inverted, .sd-interactive[disabled].sd-interactive--inverted, .sd-interactive[href=''].sd-interactive--inverted {
-      color: var(--sd-color-text-neutral-600);
+      color: rgba(var(--sd-color-text-neutral-600));
     }
 .sd-prose a--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:hover:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:hover:not([disabled]) {
-        color: var(--sd-color-text-neutral-600);
+        color: rgba(var(--sd-color-text-neutral-600));
       }
 .sd-prose a--disabled.sd-interactive--inverted:active:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:active:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:active:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:active:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:active:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:active:not([disabled]) {
-        color: var(--sd-color-text-neutral-600);
+        color: rgba(var(--sd-color-text-neutral-600));
       }
 .sd-prose--inverted a, .sd-interactive--inverted {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-prose--inverted a:hover:not([disabled]), .sd-interactive--inverted:hover:not([disabled]) {
-    color: var(--sd-color-text-primary-200);
+    color: rgba(var(--sd-color-text-primary-200));
   }
 .sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
     outline-style: solid;
@@ -64,7 +64,7 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
-    color: var(--sd-color-text-primary-400);
+    color: rgba(var(--sd-color-text-primary-400));
   }
 @property --tw-duration {
   syntax: "*";

package/dist/modules/leadtext.css

@@ -8,7 +8,7 @@
   line-height: var(--leading-normal, 1.5);
   --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-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
     font-size: var(--sd-text-lg);
@@ -17,10 +17,10 @@
     line-height: var(--leading-normal, 1.5);
     --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-prose--inverted > .sd-leadtext, .sd-leadtext--inverted {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 @property --tw-leading {
   syntax: "*";

package/dist/modules/list.css

@@ -75,7 +75,7 @@
   text-align: left;
 }
 .sd-list--icon li sd-icon:first-of-type, .sd-list--icon li .sd-list--icon__icon:first-of-type {
-      color: var(--sd-color-text-white);
+      color: rgba(var(--sd-color-text-white));
     }
 .sd-list--icon{
   list-style-type: '';
@@ -95,7 +95,7 @@
       left: calc(var(--sd-spacing-1) * 0);
       font-size: var(--sd-text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
-      color: var(--sd-color-text-primary);
+      color: rgba(var(--sd-color-text-primary));
     }
 .sd-list--icon.sd-list--horizontal {
     display: flex;
@@ -108,10 +108,10 @@
       margin-right: var(--sd-spacing-8);
     }
 .sd-list--inverted, .sd-prose--inverted > :is(ol, ul) {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-list--inverted li > sd-icon:first-of-type, .sd-list--inverted li > .sd-list--icon__icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > .sd-list--icon__icon:first-of-type {
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
   }
 @property --tw-leading {
   syntax: "*";

package/dist/modules/mark.css

@@ -2,5 +2,5 @@
 @layer theme, base, components, utilities;
 mark.sd-mark {
   background-color: transparent;
-  color: var(--sd-color-text-accent);
+  color: rgba(var(--sd-color-text-accent));
 }

package/dist/modules/media.css

@@ -4,11 +4,11 @@
   margin: calc(var(--sd-spacing-1) * 0);
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
-    color: var(--sd-color-text-neutral-700);
+    color: rgba(var(--sd-color-text-neutral-700));
   }
 .sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
       margin-top: var(--sd-spacing-3);
     }
 .sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-    color: var(--sd-color-text-primary-400);
+    color: rgba(var(--sd-color-text-primary-400));
   }

package/dist/modules/meta.css

@@ -8,20 +8,20 @@
   line-height: 1;
   --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-meta--size-sm {
     font-size: var(--sd-text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
 .sd-meta--light {
-    color: var(--sd-color-text-neutral-700);
+    color: rgba(var(--sd-color-text-neutral-700));
   }
 .sd-meta--inverted {
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
   }
 .sd-meta--inverted.sd-meta--light {
-      color: var(--sd-color-text-primary-400);
+      color: rgba(var(--sd-color-text-primary-400));
     }
 .sd-meta--pipe::after {
       content: '|';

package/dist/modules/pagination.css

@@ -30,17 +30,17 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--sd-color-text-primary);
+      color: rgba(var(--sd-color-text-primary));
       text-decoration-line: none;
       transition-property: color;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
       transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
     }
 .sd-pagination ul li a:hover:not([disabled]), .sd-pagination ul li button:hover:not([disabled]) {
-        color: var(--sd-color-text-primary-500);
+        color: rgba(var(--sd-color-text-primary-500));
       }
 .sd-pagination ul li a:active:not([disabled]), .sd-pagination ul li button:active:not([disabled]) {
-        color: var(--sd-color-text-primary-800);
+        color: rgba(var(--sd-color-text-primary-800));
       }
 .sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
         outline-width: 1px;
@@ -75,20 +75,20 @@
           border-bottom-color: transparent;
         }
 .sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
-            border-bottom-color: var(--sd-color-border-accent);
+            border-bottom-color: rgba(var(--sd-color-border-accent));
           }
 .sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
-        color: var(--sd-color-text-black);
+        color: rgba(var(--sd-color-text-black));
       }
 .sd-pagination ul li a[aria-current]:hover:not([disabled]), .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
-          color: var(--sd-color-text-black);
+          color: rgba(var(--sd-color-text-black));
         }
 .sd-pagination ul li:first-child:has(a:not([href])) a, .sd-pagination ul li:last-child:has(a:not([href])) a, .sd-pagination ul li:first-child:has(button[disabled]) button, .sd-pagination ul li:last-child:has(button[disabled]) button {
       cursor: not-allowed;
-      color: var(--sd-color-text-neutral-500);
+      color: rgba(var(--sd-color-text-neutral-500));
     }
 .sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-        color: var(--sd-color-text-neutral-500);
+        color: rgba(var(--sd-color-text-neutral-500));
       }
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
           pointer-events: none;
@@ -193,7 +193,7 @@
         width: var(--sd-spacing-8);
         border-bottom-style: var(--tw-border-style);
         border-bottom-width: var(--sd-border-width-2);
-        border-bottom-color: var(--sd-color-border-accent);
+        border-bottom-color: rgba(var(--sd-color-border-accent));
       }
 .sd-pagination--simple ul li:nth-child(2)::after {
           content: var(--tw-content);
@@ -222,32 +222,32 @@
       }
 .sd-pagination--inverted ul li::after {
         content: var(--tw-content);
-        color: var(--sd-color-text-white);
+        color: rgba(var(--sd-color-text-white));
       }
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
-        color: var(--sd-color-text-neutral-600);
+        color: rgba(var(--sd-color-text-neutral-600));
       }
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
-          color: var(--sd-color-text-neutral-600);
+          color: rgba(var(--sd-color-text-neutral-600));
         }
 .sd-pagination--inverted ul li a, .sd-pagination--inverted ul li a[aria-current], .sd-pagination--inverted ul li button, .sd-pagination--inverted ul li button[aria-current] {
-        color: var(--sd-color-text-white);
+        color: rgba(var(--sd-color-text-white));
       }
 .sd-pagination--inverted ul li a:hover:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-pagination--inverted ul li button:hover:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
-          color: var(--sd-color-text-primary-200);
+          color: rgba(var(--sd-color-text-primary-200));
         }
 .sd-pagination--inverted ul li a:active:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-pagination--inverted ul li button:active:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
-          color: var(--sd-color-text-primary-400);
+          color: rgba(var(--sd-color-text-primary-400));
         }
 .sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-pagination--inverted ul li button[aria-current]:focus-visible {
           outline-color: var(--color-white, #fff);
         }
 .sd-pagination--inverted.sd-pagination--simple ul li {
-      color: var(--sd-color-text-white);
+      color: rgba(var(--sd-color-text-white));
     }
 .sd-pagination--inverted.sd-pagination--simple ul li::after {
         content: var(--tw-content);
-        color: var(--sd-color-text-white);
+        color: rgba(var(--sd-color-text-white));
       }
 @property --tw-border-style {
   syntax: "*";

package/dist/modules/paragraph.css

@@ -8,7 +8,7 @@
   line-height: var(--leading-normal, 1.5);
   --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-paragraph--size-sm, .sd-prose p--size-sm {
     font-size: var(--sd-text-sm);
@@ -17,10 +17,10 @@
     line-height: var(--leading-normal, 1.5);
     --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-paragraph--inverted, .sd-prose--inverted p {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 @property --tw-leading {
   syntax: "*";

package/dist/modules/prose.css

@@ -8,7 +8,7 @@
   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-display {
@@ -23,7 +23,7 @@
       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-display--size-3xl {
       font-size: var(--sd-text-2xl);
@@ -32,7 +32,7 @@
       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-display--size-3xl {
@@ -41,18 +41,18 @@
     }
       }
 .sd-display--inverted {
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
   }
 .sd-headline, .sd-prose :is(h1, h2, h3, h4, h5) {
   display: flex;
   --tw-font-weight: var(--sd-font-weight-bold);
   font-weight: var(--sd-font-weight-bold);
-  color: var(--sd-color-text-primary);
+  color: rgba(var(--sd-color-text-primary));
 }
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
     flex-shrink: 0;
     font-size: 3rem;
-    color: var(--sd-color-text-primary);
+    color: rgba(var(--sd-color-text-primary));
   }
 @media (width >= 40rem) {
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
@@ -103,7 +103,7 @@
       }
 .sd-headline.sd-headline--size-xl, .sd-headline.sd-headline--size-lg, .sd-headline.sd-headline--size-base, .sd-headline:is(h3, h4, h5):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) {
     gap: var(--sd-spacing-2);
-    color: var(--sd-color-text-black);
+    color: rgba(var(--sd-color-text-black));
   }
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline.sd-headline--size-lg sd-icon, .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h3, h4, h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) sd-icon {
       font-size: 2rem;
@@ -158,10 +158,10 @@
       margin-right: var(--sd-spacing-0\.5);
     }
 .sd-headline--inverted:not(#_), .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
   }
 .sd-prose a--reset, .sd-interactive--reset {
     all: unset;
@@ -169,7 +169,7 @@
   }
 .sd-prose a, .sd-interactive{
   cursor: pointer;
-  color: var(--sd-color-text-primary);
+  color: rgba(var(--sd-color-text-primary));
   text-decoration-line: underline;
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
@@ -180,7 +180,7 @@
   transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
 .sd-prose a:hover:not([disabled]), .sd-interactive:hover:not([disabled]) {
-    color: var(--sd-color-text-primary-500);
+    color: rgba(var(--sd-color-text-primary-500));
   }
 .sd-prose a:focus-visible, .sd-interactive:focus-visible {
     outline-style: solid;
@@ -189,35 +189,35 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
-    color: var(--sd-interactive--active-color-text, var(--sd-color-primary-800));
+    color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
   }
 .sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
     text-decoration-line: none;
   }
 .sd-prose a--disabled, .sd-prose a[disabled], .sd-prose a[href=''], .sd-interactive--disabled, .sd-interactive[disabled], .sd-interactive[href=''] {
     cursor: not-allowed;
-    color: var(--sd-color-text-neutral-500);
+    color: rgba(var(--sd-color-text-neutral-500));
   }
 .sd-prose a--disabled:hover:not([disabled]), .sd-prose a[disabled]:hover:not([disabled]), .sd-prose a[href='']:hover:not([disabled]), .sd-interactive--disabled:hover:not([disabled]), .sd-interactive[disabled]:hover:not([disabled]), .sd-interactive[href='']:hover:not([disabled]) {
-      color: var(--sd-color-text-neutral-500);
+      color: rgba(var(--sd-color-text-neutral-500));
     }
 .sd-prose a--disabled:active:not([disabled]), .sd-prose a[disabled]:active:not([disabled]), .sd-prose a[href='']:active:not([disabled]), .sd-interactive--disabled:active:not([disabled]), .sd-interactive[disabled]:active:not([disabled]), .sd-interactive[href='']:active:not([disabled]) {
-      color: var(--sd-color-text-neutral-500);
+      color: rgba(var(--sd-color-text-neutral-500));
     }
 .sd-prose a--disabled.sd-interactive--inverted, .sd-prose a[disabled].sd-interactive--inverted, .sd-prose a[href=''].sd-interactive--inverted, .sd-interactive--disabled.sd-interactive--inverted, .sd-interactive[disabled].sd-interactive--inverted, .sd-interactive[href=''].sd-interactive--inverted {
-      color: var(--sd-color-text-neutral-600);
+      color: rgba(var(--sd-color-text-neutral-600));
     }
 .sd-prose a--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:hover:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:hover:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:hover:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:hover:not([disabled]) {
-        color: var(--sd-color-text-neutral-600);
+        color: rgba(var(--sd-color-text-neutral-600));
       }
 .sd-prose a--disabled.sd-interactive--inverted:active:not([disabled]), .sd-prose a[disabled].sd-interactive--inverted:active:not([disabled]), .sd-prose a[href=''].sd-interactive--inverted:active:not([disabled]), .sd-interactive--disabled.sd-interactive--inverted:active:not([disabled]), .sd-interactive[disabled].sd-interactive--inverted:active:not([disabled]), .sd-interactive[href=''].sd-interactive--inverted:active:not([disabled]) {
-        color: var(--sd-color-text-neutral-600);
+        color: rgba(var(--sd-color-text-neutral-600));
       }
 .sd-prose--inverted a, .sd-interactive--inverted {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-prose--inverted a:hover:not([disabled]), .sd-interactive--inverted:hover:not([disabled]) {
-    color: var(--sd-color-text-primary-200);
+    color: rgba(var(--sd-color-text-primary-200));
   }
 .sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
     outline-style: solid;
@@ -226,7 +226,7 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
-    color: var(--sd-color-text-primary-400);
+    color: rgba(var(--sd-color-text-primary-400));
   }
 .sd-prose > .sd-leadtext, .sd-leadtext {
   font-size: var(--sd-text-xl);
@@ -235,7 +235,7 @@
   line-height: var(--leading-normal, 1.5);
   --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-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
     font-size: var(--sd-text-lg);
@@ -244,10 +244,10 @@
     line-height: var(--leading-normal, 1.5);
     --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-prose--inverted > .sd-leadtext, .sd-leadtext--inverted {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-list:not(.sd-list--icon), .sd-prose > :is(ol, ul) {
   list-style-position: revert;
@@ -323,7 +323,7 @@
   text-align: left;
 }
 .sd-list--icon li sd-icon:first-of-type, .sd-list--icon li .sd-list--icon__icon:first-of-type {
-      color: var(--sd-color-text-white);
+      color: rgba(var(--sd-color-text-white));
     }
 .sd-list--icon{
   list-style-type: '';
@@ -343,7 +343,7 @@
       left: calc(var(--sd-spacing-1) * 0);
       font-size: var(--sd-text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
-      color: var(--sd-color-text-primary);
+      color: rgba(var(--sd-color-text-primary));
     }
 .sd-list--icon.sd-list--horizontal {
     display: flex;
@@ -356,10 +356,10 @@
       margin-right: var(--sd-spacing-8);
     }
 .sd-list--inverted, .sd-prose--inverted > :is(ol, ul) {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-list--inverted li > sd-icon:first-of-type, .sd-list--inverted li > .sd-list--icon__icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type, .sd-prose--inverted > :is(ol, ul) li > .sd-list--icon__icon:first-of-type {
-    color: var(--sd-color-text-white);
+    color: rgba(var(--sd-color-text-white));
   }
 .sd-paragraph, .sd-prose p {
   font-size: var(--sd-text-base);
@@ -368,7 +368,7 @@
   line-height: var(--leading-normal, 1.5);
   --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-paragraph--size-sm, .sd-prose p--size-sm {
     font-size: var(--sd-text-sm);
@@ -377,22 +377,22 @@
     line-height: var(--leading-normal, 1.5);
     --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-paragraph--inverted, .sd-prose--inverted p {
-  color: var(--sd-color-text-white);
+  color: rgba(var(--sd-color-text-white));
 }
 .sd-prose figure, figure.sd-media {
   margin: calc(var(--sd-spacing-1) * 0);
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
-    color: var(--sd-color-text-neutral-700);
+    color: rgba(var(--sd-color-text-neutral-700));
   }
 .sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
       margin-top: var(--sd-spacing-3);
     }
 .sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-    color: var(--sd-color-text-primary-400);
+    color: rgba(var(--sd-color-text-primary-400));
   }
 .sd-prose td, .sd-prose th, .sd-table-cell {
   border-inline-style: var(--tw-border-style);
@@ -401,13 +401,13 @@
   border-block-width: 1px;
   --tw-border-style: solid;
   border-style: solid;
-  border-color: var(--sd-color-border-neutral-400);
+  border-color: rgba(var(--sd-color-border-neutral-400));
   background-color: transparent;
   padding: var(--sd-spacing-4);
   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-black);
+  color: rgba(var(--sd-color-text-black));
 }
 .sd-table-cell--divider {
     border-right-style: var(--tw-border-style);
@@ -441,7 +441,7 @@
       width: 100%;
       border-style: var(--tw-border-style);
       border-width: 0.5px;
-      border-color: var(--sd-color-border-neutral-400);
+      border-color: rgba(var(--sd-color-border-neutral-400));
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -480,13 +480,13 @@
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 .sd-table-cell--bg-white {
-      background-color: var(--sd-color-background-white);
+      background-color: rgba(var(--sd-color-background-white));
     }
 .sd-table-cell--bg-primary-100 {
-      background-color: var(--sd-color-background-primary-100);
+      background-color: rgba(var(--sd-color-background-primary-100));
     }
 .sd-table-cell--bg-neutral-100 {
-      background-color: var(--sd-color-background-neutral-100);
+      background-color: rgba(var(--sd-color-background-neutral-100));
     }
 .sd-table, .sd-prose table {
   all: unset;
@@ -522,7 +522,7 @@
     height: calc(var(--sd-spacing-1) * 0);
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
-    border-color: var(--sd-color-border-neutral-500);
+    border-color: rgba(var(--sd-color-border-neutral-500));
   }
 .sd-prose pre {
     overflow: auto;
@@ -543,10 +543,10 @@
     padding-block: calc(var(--sd-spacing-1) * 0);
   }
 .sd-prose--inverted hr {
-      border-color: var(--sd-color-border-white);
+      border-color: rgba(var(--sd-color-border-white));
     }
 .sd-prose--inverted pre {
-      color: var(--sd-color-text-white);
+      color: rgba(var(--sd-color-text-white));
     }
 .sd-prose--full-width {
     max-width: unset;

package/dist/modules/status-badge.css

@@ -11,17 +11,17 @@
     width: var(--sd-spacing-3);
     border-radius: var(--sd-radius-full);
     padding: var(--sd-spacing-1);
-    color: var(--sd-color-text-white) !important;
+    color: rgba(var(--sd-color-text-white)) !important;
   }
 .sd-status-badge--success sd-icon {
-      background-color: var(--sd-color-background-success);
+      background-color: rgba(var(--sd-color-background-success));
     }
 .sd-status-badge--warning sd-icon {
-      background-color: var(--sd-color-background-warning);
+      background-color: rgba(var(--sd-color-background-warning));
     }
 .sd-status-badge--error sd-icon {
-      background-color: var(--sd-color-background-error);
+      background-color: rgba(var(--sd-color-background-error));
     }
 .sd-status-badge--info sd-icon {
-      background-color: var(--sd-color-background-info);
+      background-color: rgba(var(--sd-color-background-info));
     }

package/dist/modules/table-cell.css

@@ -8,13 +8,13 @@
   border-block-width: 1px;
   --tw-border-style: solid;
   border-style: solid;
-  border-color: var(--sd-color-border-neutral-400);
+  border-color: rgba(var(--sd-color-border-neutral-400));
   background-color: transparent;
   padding: var(--sd-spacing-4);
   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-black);
+  color: rgba(var(--sd-color-text-black));
 }
 .sd-table-cell--divider {
     border-right-style: var(--tw-border-style);
@@ -48,7 +48,7 @@
       width: 100%;
       border-style: var(--tw-border-style);
       border-width: 0.5px;
-      border-color: var(--sd-color-border-neutral-400);
+      border-color: rgba(var(--sd-color-border-neutral-400));
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -87,13 +87,13 @@
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 .sd-table-cell--bg-white {
-      background-color: var(--sd-color-background-white);
+      background-color: rgba(var(--sd-color-background-white));
     }
 .sd-table-cell--bg-primary-100 {
-      background-color: var(--sd-color-background-primary-100);
+      background-color: rgba(var(--sd-color-background-primary-100));
     }
 .sd-table-cell--bg-neutral-100 {
-      background-color: var(--sd-color-background-neutral-100);
+      background-color: rgba(var(--sd-color-background-neutral-100));
     }
 @property --tw-border-style {
   syntax: "*";