@solid-design-system/styles 7.0.0-next.9 → 7.0.1

package/dist/modules/prose.css

@@ -2,79 +2,79 @@
 @layer properties;
 @layer theme, base, components, utilities;
 .sd-display {
-  font-size: var(--sd-text-3xl);
+  font-size: var(--sd-text-3xl, 2rem);
   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: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 @media (width >= 64rem) {
 .sd-display {
-    font-size: var(--sd-text-4xl);
+    font-size: var(--sd-text-4xl, 2.5rem);
     line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
   }
 .sd-display--size-xl {
-      font-size: var(--sd-text-xl);
+      font-size: var(--sd-text-xl, 1.5rem);
       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: rgba(var(--sd-color-text-black));
+      --tw-font-weight: var(--sd-font-weight-normal, 400);
+      font-weight: var(--sd-font-weight-normal, 400);
+      color: rgba(var(--sd-color-text-black, 24 24 24));
     }
 .sd-display--size-3xl {
-      font-size: var(--sd-text-2xl);
+      font-size: var(--sd-text-2xl, 1.75rem);
       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: rgba(var(--sd-color-text-black));
+      --tw-font-weight: var(--sd-font-weight-normal, 400);
+      font-weight: var(--sd-font-weight-normal, 400);
+      color: rgba(var(--sd-color-text-black, 24 24 24));
     }
 @media (width >= 64rem) {
 .sd-display--size-3xl {
-        font-size: var(--sd-text-3xl);
+        font-size: var(--sd-text-3xl, 2rem);
         line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
     }
       }
 .sd-display--inverted {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .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: rgba(var(--sd-color-text-primary));
+  --tw-font-weight: var(--sd-font-weight-bold, 600);
+  font-weight: var(--sd-font-weight-bold, 600);
+  color: rgba(var(--sd-color-text-primary, 0 53 142));
 }
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
     flex-shrink: 0;
     font-size: 3rem;
-    color: rgba(var(--sd-color-text-primary));
+    color: rgba(var(--sd-color-text-primary, 0 53 142));
   }
 @media (width >= 40rem) {
 .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
-      margin-top: var(--sd-spacing-2)
+      margin-top: var(--sd-spacing-2, 0.5rem)
   }
     }
 .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-    gap: var(--sd-spacing-4);
-    font-size: var(--sd-text-3xl);
+    gap: var(--sd-spacing-4, 1rem);
+    font-size: var(--sd-text-3xl, 2rem);
     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);
-    color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
+    color: rgba(var(--sd-headline--3xl-onwards-color-text, 0 53 142));
   }
 @media (width >= 40rem) {
 .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
-      font-size: var(--sd-text-4xl);
+      font-size: var(--sd-text-4xl, 2.5rem);
       line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
   }
     }
 .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) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 @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 {
@@ -82,44 +82,44 @@
     }
       }
 .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) {
-    gap: var(--sd-spacing-4);
-    font-size: var(--sd-text-2xl);
+    gap: var(--sd-spacing-4, 1rem);
+    font-size: var(--sd-text-2xl, 1.75rem);
     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);
-    color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
+    color: rgba(var(--sd-headline--3xl-onwards-color-text, 0 53 142));
   }
 @media (width >= 40rem) {
 .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) {
-      font-size: var(--sd-text-3xl);
+      font-size: var(--sd-text-3xl, 2rem);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
   }
     }
 .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-1) * -1)
+        margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1)
     }
       }
 .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: rgba(var(--sd-color-text-black));
+    gap: var(--sd-spacing-2, 0.5rem);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .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;
     }
 .sd-headline.sd-headline--size-xl, .sd-headline:is(h3):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) {
-    font-size: var(--sd-text-xl);
+    font-size: var(--sd-text-xl, 1.5rem);
     line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
   }
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):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):is(h3):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-0\.5) * -1);
+      margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):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):is(h3):not(.sd-headline) sd-icon {
-        margin-top: calc(var(--sd-spacing-0\.5) * -1)
+        margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1)
     }
       }
 .sd-headline.sd-headline--size-lg, .sd-headline.sd-headline--size-base, .sd-headline:is(h4, h5):not(.sd-headline), .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(h4, h5):not(.sd-headline) {
@@ -127,23 +127,23 @@
     line-height: var(--leading-normal, 1.5);
   }
 .sd-headline.sd-headline--size-lg, .sd-headline:is(h4), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) {
-    font-size: var(--sd-text-lg);
+    font-size: var(--sd-text-lg, 1.25rem);
     line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
   }
 .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-      margin-top: calc(var(--sd-spacing-0\.5) * -1);
+      margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1);
     }
 @media (width >= 40rem) {
 .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-        margin-top: calc(var(--sd-spacing-0\.5) * -1)
+        margin-top: calc(var(--sd-spacing-0\.5, 0.125rem) * -1)
     }
       }
 .sd-headline.sd-headline--size-base, .sd-headline:is(h5):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) {
-    font-size: var(--sd-text-base);
+    font-size: var(--sd-text-base, 1rem);
     line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   }
 .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h5):not(.sd-headline) 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(h5):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 .sd-headline.sd-headline--size-base mark, .sd-headline:is(h5):not(.sd-headline) mark, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base mark, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) mark {
       color: inherit;
@@ -152,24 +152,24 @@
   display: inline-block;
 }
 .sd-headline--inline.sd-headline sd-icon, .sd-headline--inline:is(h1):not(.sd-headline) sd-icon {
-      margin-top: calc(var(--sd-spacing-2) * -1);
-      margin-right: var(--sd-spacing-2);
+      margin-top: calc(var(--sd-spacing-2, 0.5rem) * -1);
+      margin-right: var(--sd-spacing-2, 0.5rem);
       vertical-align: middle;
     }
 .sd-headline--inline:is(.sd-headline--size-xl, .sd-headline--size-lg, .sd-headline--size-base) sd-icon {
-      margin-right: var(--sd-spacing-0\.5);
+      margin-right: var(--sd-spacing-0\.5, 0.125rem);
     }
 .sd-headline--inline:is(.sd-headline--size-3xl, .sd-headline--size-xl) sd-icon {
-      margin-top: calc(var(--sd-spacing-2) * -1);
+      margin-top: calc(var(--sd-spacing-2, 0.5rem) * -1);
     }
 .sd-headline--inline:is(.sd-headline--size-lg) sd-icon {
-      margin-top: calc(var(--sd-spacing-1) * -1);
+      margin-top: calc(var(--sd-spacing-1, 0.25rem) * -1);
     }
 .sd-headline--inverted:not(#_), .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
-    color: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-prose a--reset, .sd-interactive--reset {
     all: unset;
@@ -177,7 +177,7 @@
   }
 .sd-prose a, .sd-interactive{
   cursor: pointer;
-  color: rgba(var(--sd-interactive--default-color-text, rgba(var(--sd-color-primary))));
+  color: rgba(var(--sd-interactive--default-color-text, 0 53 142));
   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)));
@@ -188,7 +188,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: rgba(var(--sd-color-text-primary-500));
+    color: rgba(var(--sd-color-text-primary-500, 70 109 175));
   }
 .sd-prose a:focus-visible, .sd-interactive:focus-visible {
     outline-style: solid;
@@ -197,35 +197,35 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
-    color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
+    color: rgba(var(--sd-interactive--active-color-text, 5 21 48));
   }
 .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: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+    color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
   }
 .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: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+      color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
     }
 .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: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
+      color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
     }
 .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: rgba(var(--sd-color-text-neutral-600));
+      color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
     }
 .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: rgba(var(--sd-color-text-neutral-600));
+        color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
       }
 .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: rgba(var(--sd-color-text-neutral-600));
+        color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
       }
 .sd-prose--inverted a, .sd-interactive--inverted {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-prose--inverted a:hover:not([disabled]), .sd-interactive--inverted:hover:not([disabled]) {
-    color: rgba(var(--sd-color-text-primary-200));
+    color: rgba(var(--sd-color-text-primary-200, 224 233 243));
   }
 .sd-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
     outline-style: solid;
@@ -234,39 +234,39 @@
     outline-color: var(--outline-color-primary);
   }
 .sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
-    color: rgba(var(--sd-color-text-primary-400));
+    color: rgba(var(--sd-color-text-primary-400, 153 171 208));
   }
 .sd-prose > .sd-leadtext, .sd-leadtext {
-  font-size: var(--sd-text-xl);
+  font-size: var(--sd-text-xl, 1.5rem);
   line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
   --tw-leading: var(--leading-normal, 1.5);
   line-height: var(--leading-normal, 1.5);
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
-    font-size: var(--sd-text-lg);
+    font-size: var(--sd-text-lg, 1.25rem);
     line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
     --tw-leading: var(--leading-normal, 1.5);
     line-height: var(--leading-normal, 1.5);
-    --tw-font-weight: var(--sd-font-weight-normal);
-    font-weight: var(--sd-font-weight-normal);
-    color: rgba(var(--sd-color-text-black));
+    --tw-font-weight: var(--sd-font-weight-normal, 400);
+    font-weight: var(--sd-font-weight-normal, 400);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .sd-prose--inverted > .sd-leadtext, .sd-leadtext--inverted {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-list:not(.sd-list--icon), .sd-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
-  padding-block: var(--sd-spacing-4);
-  padding-left: var(--sd-spacing-4);
+  padding-block: var(--sd-spacing-4, 1rem);
+  padding-left: var(--sd-spacing-4, 1rem);
   text-align: left;
 }
 .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
-    margin-top: var(--sd-spacing-3);
+    margin-top: var(--sd-spacing-3, 0.75rem);
   }
 .sd-list:not(.sd-list--icon) ul, .sd-list:not(.sd-list--icon) ol, .sd-prose > :is(ol, ul) ul, .sd-prose > :is(ol, ul) ol {
     all: revert;
@@ -327,11 +327,11 @@
               list-style-type: '\2010';
             }
 .sd-list--icon {
-  padding-block: var(--sd-spacing-4);
+  padding-block: var(--sd-spacing-4, 1rem);
   text-align: left;
 }
 .sd-list--icon li sd-icon:first-of-type, .sd-list--icon li .sd-list--icon__icon:first-of-type {
-      color: rgba(var(--sd-color-text-white));
+      color: rgba(var(--sd-color-text-white, 255 255 255));
     }
 .sd-list--icon{
   list-style-type: '';
@@ -341,17 +341,17 @@
   }
 .sd-list--icon li {
     position: relative;
-    padding-top: var(--sd-spacing-3);
-    padding-left: var(--sd-spacing-10);
+    padding-top: var(--sd-spacing-3, 0.75rem);
+    padding-left: var(--sd-spacing-10, 2.5rem);
     --tw-leading: 32px;
     line-height: 32px;
   }
 .sd-list--icon li > sd-icon:first-of-type, .sd-list--icon li > .sd-list--icon__icon:first-of-type {
       position: absolute;
       left: 0;
-      font-size: var(--sd-text-3xl);
+      font-size: var(--sd-text-3xl, 2rem);
       line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
-      color: rgb(var(--sd-color-icon-fill-primary));
+      color: rgb(var(--sd-color-icon-fill-primary, 0 53 142));
     }
 .sd-list--icon.sd-list--horizontal {
     display: flex;
@@ -361,46 +361,46 @@
       padding-top: 0;
     }
 .sd-list--icon.sd-list--horizontal li:not(:last-child) {
-      margin-right: var(--sd-spacing-8);
+      margin-right: var(--sd-spacing-8, 2rem);
     }
 .sd-list--inverted, .sd-prose--inverted > :is(ol, ul) {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .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: rgba(var(--sd-color-text-white));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 .sd-paragraph, .sd-prose p {
-  font-size: var(--sd-text-base);
+  font-size: var(--sd-text-base, 1rem);
   line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   --tw-leading: var(--leading-normal, 1.5);
   line-height: var(--leading-normal, 1.5);
-  --tw-font-weight: var(--sd-font-weight-normal);
-  font-weight: var(--sd-font-weight-normal);
-  color: rgba(var(--sd-color-text-black));
+  --tw-font-weight: var(--sd-font-weight-normal, 400);
+  font-weight: var(--sd-font-weight-normal, 400);
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-paragraph--size-sm, .sd-prose p--size-sm {
-    font-size: var(--sd-text-sm);
+    font-size: var(--sd-text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
     --tw-leading: var(--leading-normal, 1.5);
     line-height: var(--leading-normal, 1.5);
-    --tw-font-weight: var(--sd-font-weight-normal);
-    font-weight: var(--sd-font-weight-normal);
-    color: rgba(var(--sd-color-text-black));
+    --tw-font-weight: var(--sd-font-weight-normal, 400);
+    font-weight: var(--sd-font-weight-normal, 400);
+    color: rgba(var(--sd-color-text-black, 24 24 24));
   }
 .sd-paragraph--inverted, .sd-prose--inverted p {
-  color: rgba(var(--sd-color-text-white));
+  color: rgba(var(--sd-color-text-white, 255 255 255));
 }
 .sd-prose figure, figure.sd-media {
   margin: 0;
 }
 .sd-prose figure figcaption, figure.sd-media figcaption {
-    color: rgba(var(--sd-color-text-neutral-700));
+    color: rgba(var(--sd-color-text-neutral-700, 104 104 104));
   }
 .sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
-      margin-top: var(--sd-spacing-3);
+      margin-top: var(--sd-spacing-3, 0.75rem);
     }
 .sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
-    color: rgba(var(--sd-color-text-primary-400));
+    color: rgba(var(--sd-color-text-primary-400, 153 171 208));
   }
 .sd-prose td, .sd-prose th, .sd-table-cell {
   border-inline-style: var(--tw-border-style);
@@ -409,13 +409,13 @@
   border-block-width: 1px;
   --tw-border-style: solid;
   border-style: solid;
-  border-color: rgba(var(--sd-color-border-neutral-400));
+  border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
   background-color: transparent;
-  padding: var(--sd-spacing-4);
+  padding: var(--sd-spacing-4, 1rem);
   text-align: left;
-  font-size: var(--sd-text-sm);
+  font-size: var(--sd-text-sm, 0.875rem);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-  color: rgba(var(--sd-color-text-black));
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-table-cell--divider {
     border-right-style: var(--tw-border-style);
@@ -424,10 +424,10 @@
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after, .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       pointer-events: none;
       position: absolute;
-      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10), transparent);
+      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10, 10%), transparent);
       --tw-gradient-to: transparent;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-      opacity: var(--sd-opacity-0);
+      opacity: var(--sd-opacity-0, 0%);
       transition-property: opacity;
       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));
@@ -439,7 +439,7 @@
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
       right: 0;
       left: 0;
-      height: var(--sd-spacing-2\.5);
+      height: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
@@ -449,14 +449,14 @@
       width: 100%;
       border-style: var(--tw-border-style);
       border-width: 0.5px;
-      border-color: rgba(var(--sd-color-border-neutral-400));
+      border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       --tw-content: '';
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       top: 0;
       bottom: 0;
-      width: var(--sd-spacing-2\.5);
+      width: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {
     opacity: 100%;
@@ -488,13 +488,13 @@
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 .sd-table-cell--bg-white {
-      background-color: rgba(var(--sd-color-background-white));
+      background-color: rgba(var(--sd-color-background-white, 255 255 255));
     }
 .sd-table-cell--bg-primary-100 {
-      background-color: rgba(var(--sd-color-background-primary-100));
+      background-color: rgba(var(--sd-color-background-primary-100, 236 240 249));
     }
 .sd-table-cell--bg-neutral-100 {
-      background-color: rgba(var(--sd-color-background-neutral-100));
+      background-color: rgba(var(--sd-color-background-neutral-100, 246 246 246));
     }
 .sd-table, .sd-prose table {
   all: unset;
@@ -512,31 +512,31 @@
   text-align: left;
 }
 .sd-prose > *:not(:first-child) {
-    margin-top: var(--sd-spacing-4);
+    margin-top: var(--sd-spacing-4, 1rem);
   }
 .sd-prose > *:first-child {
     margin-top: 0;
   }
 .sd-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
-    margin-top: var(--sd-spacing-2);
+    margin-top: var(--sd-spacing-2, 0.5rem);
   }
 .sd-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
-    margin-top: var(--sd-spacing-8);
+    margin-top: var(--sd-spacing-8, 2rem);
   }
 .sd-prose > figure + *:not(#_), .sd-prose > img + *:not(#_) {
-    margin-top: var(--sd-spacing-6);
+    margin-top: var(--sd-spacing-6, 1.5rem);
   }
 .sd-prose hr {
     height: 0;
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
-    border-color: rgba(var(--sd-color-border-neutral-500));
+    border-color: rgba(var(--sd-color-border-neutral-500, 174 174 174));
   }
 .sd-prose pre {
     overflow: auto;
   }
 .sd-prose blockquote, .sd-prose blockquote > * {
-      font-size: var(--sd-text-xl);
+      font-size: var(--sd-text-xl, 1.5rem);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
     }
 .sd-prose blockquote:has(*) *:first-child::before, .sd-prose blockquote:not(:has(*))::before {
@@ -551,10 +551,10 @@
     padding-block: 0;
   }
 .sd-prose--inverted hr {
-      border-color: rgba(var(--sd-color-border-white));
+      border-color: rgba(var(--sd-color-border-white, 255 255 255));
     }
 .sd-prose--inverted pre {
-      color: rgba(var(--sd-color-text-white));
+      color: rgba(var(--sd-color-text-white, 255 255 255));
     }
 .sd-prose--full-width {
     max-width: unset;

package/dist/modules/status-badge.css

@@ -5,23 +5,23 @@
   align-items: center;
 }
 .sd-status-badge sd-icon {
-    margin-right: var(--sd-spacing-2);
+    margin-right: var(--sd-spacing-2, 0.5rem);
     display: flex;
-    height: var(--sd-spacing-3);
-    width: var(--sd-spacing-3);
-    border-radius: var(--sd-radius-full);
-    padding: var(--sd-spacing-1);
-    color: rgba(var(--sd-color-text-white)) !important;
+    height: var(--sd-spacing-3, 0.75rem);
+    width: var(--sd-spacing-3, 0.75rem);
+    border-radius: var(--sd-radius-full, 624.9375rem);
+    padding: var(--sd-spacing-1, 0.25rem);
+    color: rgba(var(--sd-color-text-white, 255 255 255)) !important;
   }
 .sd-status-badge--success sd-icon {
-      background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-accent-550))));
+      background-color: rgba(var(--sd-badge--green-color-background, 54 123 40));
     }
 .sd-status-badge--warning sd-icon {
-      background-color: rgba(var(--sd-color-background-warning));
+      background-color: rgba(var(--sd-color-background-warning, 187 141 32));
     }
 .sd-status-badge--error sd-icon {
-      background-color: rgba(var(--sd-badge--red-color-background, rgba(var(--sd-color-error))));
+      background-color: rgba(var(--sd-badge--red-color-background, 204 25 55));
     }
 .sd-status-badge--info sd-icon {
-      background-color: rgba(var(--sd-color-background-info));
+      background-color: rgba(var(--sd-color-background-info, 21 130 213));
     }

package/dist/modules/table-cell.css

@@ -8,13 +8,13 @@
   border-block-width: 1px;
   --tw-border-style: solid;
   border-style: solid;
-  border-color: rgba(var(--sd-color-border-neutral-400));
+  border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
   background-color: transparent;
-  padding: var(--sd-spacing-4);
+  padding: var(--sd-spacing-4, 1rem);
   text-align: left;
-  font-size: var(--sd-text-sm);
+  font-size: var(--sd-text-sm, 0.875rem);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
-  color: rgba(var(--sd-color-text-black));
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
 .sd-table-cell--divider {
     border-right-style: var(--tw-border-style);
@@ -23,10 +23,10 @@
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after, .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       pointer-events: none;
       position: absolute;
-      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10), transparent);
+      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-10, 10%), transparent);
       --tw-gradient-to: transparent;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-      opacity: var(--sd-opacity-0);
+      opacity: var(--sd-opacity-0, 0%);
       transition-property: opacity;
       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));
@@ -38,7 +38,7 @@
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
       right: 0;
       left: 0;
-      height: var(--sd-spacing-2\.5);
+      height: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
       position: absolute;
@@ -48,14 +48,14 @@
       width: 100%;
       border-style: var(--tw-border-style);
       border-width: 0.5px;
-      border-color: rgba(var(--sd-color-border-neutral-400));
+      border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       --tw-content: '';
       content: var(--tw-content);
     }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
       top: 0;
       bottom: 0;
-      width: var(--sd-spacing-2\.5);
+      width: var(--sd-spacing-2\.5, 0.625rem);
     }
 .sd-table-cell.sd-table-cell--shadow-active:after {
     opacity: 100%;
@@ -87,13 +87,13 @@
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 .sd-table-cell--bg-white {
-      background-color: rgba(var(--sd-color-background-white));
+      background-color: rgba(var(--sd-color-background-white, 255 255 255));
     }
 .sd-table-cell--bg-primary-100 {
-      background-color: rgba(var(--sd-color-background-primary-100));
+      background-color: rgba(var(--sd-color-background-primary-100, 236 240 249));
     }
 .sd-table-cell--bg-neutral-100 {
-      background-color: rgba(var(--sd-color-background-neutral-100));
+      background-color: rgba(var(--sd-color-background-neutral-100, 246 246 246));
     }
 @property --tw-border-style {
   syntax: "*";