@solid-design-system/styles 7.0.0-next.10 → 7.0.0-next.12

package/dist-versioned/modules/chip.css

@@ -1,103 +1,103 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-7-0-0-next-10-chip {
+.sd-7-0-0-next-12-chip {
   display: inline-flex;
-  height: var(--sd-spacing-6);
+  height: var(--sd-spacing-6, 1.5rem);
   align-items: center;
   overflow: hidden;
-  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
+  border-radius: var(--sd-chip-border-radius, 0.25rem);
   border-style: var(--tw-border-style);
   border-width: 1px;
   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);
+  border-color: rgba(var(--sd-chip--primary-subtle-color-filled-border, 255 255 255 / 0));
+  background-color: rgba(var(--sd-chip--primary-subtle-color-background, 236 240 249));
+  padding-inline: var(--sd-spacing-2, 0.5rem);
   font-size: var(--sd-marker-font-size, 0.875rem);
-  font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
+  font-weight: var(--sd-marker-font-weight, 400);
   white-space: nowrap;
-  color: rgba(var(--sd-color-text-black));
+  color: rgba(var(--sd-color-text-black, 24 24 24));
 }
-.sd-7-0-0-next-10-chip--size-lg {
-    height: var(--sd-spacing-8);
-    padding-inline: var(--sd-spacing-3);
+.sd-7-0-0-next-12-chip--size-lg {
+    height: var(--sd-spacing-8, 2rem);
+    padding-inline: var(--sd-spacing-3, 0.75rem);
   }
-.sd-7-0-0-next-10-chip--sharp {
-    border-radius: var(--sd-radius-none);
+.sd-7-0-0-next-12-chip--sharp {
+    border-radius: var(--sd-radius-none, 0);
   }
-.sd-7-0-0-next-10-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-7-0-0-next-12-chip--shade-low {
+    border-color: rgba(var(--sd-chip--primary-low-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-low-color-background, 224 233 243));
   }
-.sd-7-0-0-next-10-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-7-0-0-next-12-chip--shade-medium {
+    border-color: rgba(var(--sd-chip--primary-medium-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-medium-color-background, 200 213 231));
   }
-.sd-7-0-0-next-10-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-7-0-0-next-12-chip--shade-high {
+    border-color: rgba(var(--sd-chip--primary-high-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--primary-high-color-background, 153 171 208));
   }
-.sd-7-0-0-next-10-chip--shade-none {
+.sd-7-0-0-next-12-chip--shade-none {
     border-color: transparent;
     background-color: transparent;
   }
-.sd-7-0-0-next-10-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-7-0-0-next-12-chip--color-neutral {
+    border-color: rgba(var(--sd-chip--neutral-subtle-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--neutral-subtle-color-background, 246 246 246));
   }
-.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-low {
+      border-color: rgba(var(--sd-chip--neutral-low-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-low-color-background, 233 233 233));
     }
-.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-medium {
+      border-color: rgba(var(--sd-chip--neutral-medium-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-medium-color-background, 218 218 218));
     }
-.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-high {
+      border-color: rgba(var(--sd-chip--neutral-high-color-filled-border, 255 255 255 / 0));
+      background-color: rgba(var(--sd-chip--neutral-high-color-background, 195 195 195));
     }
-.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-chip--shade-none {
+.sd-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-none {
       border-color: transparent;
       background-color: transparent;
     }
-.sd-7-0-0-next-10-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-7-0-0-next-12-chip--color-white {
+    border-color: rgba(var(--sd-chip--white-color-filled-border, 255 255 255 / 0));
+    background-color: rgba(var(--sd-chip--white-color-background, 255 255 255));
   }
-.sd-7-0-0-next-10-chip--outline {
+.sd-7-0-0-next-12-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)));
+    border-color: rgba(var(--sd-chip--primary-low-color-border, 224 233 243));
+    background-color: rgba(var(--sd-chip--primary-low-color-outline-fill, 255 255 255 / 0));
   }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--shade-low {
+      border-color: rgba(var(--sd-chip--primary-medium-color-border, 200 213 231));
+      background-color: rgba(var(--sd-chip--primary-medium-color-outline-fill, 255 255 255 / 0));
     }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--shade-medium {
+      border-color: rgba(var(--sd-chip--primary-high-color-border, 153 171 208));
+      background-color: rgba(var(--sd-chip--primary-high-color-outline-fill, 255 255 255 / 0));
     }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--shade-high {
+      border-color: rgba(var(--sd-chip--primary-strong-color-border, 70 109 175));
+      background-color: rgba(var(--sd-chip--primary-strong-color-outline-fill, 255 255 255 / 0));
     }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--color-neutral {
+      border-color: rgba(var(--sd-chip--neutral-low-color-border, 233 233 233));
+      background-color: rgba(var(--sd-chip--neutral-low-color-outline-fill, 255 255 255 / 0));
     }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-low {
+        border-color: rgba(var(--sd-chip--neutral-medium-color-border, 218 218 218));
+        background-color: rgba(var(--sd-chip--neutral-medium-color-outline-fill, 255 255 255 / 0));
       }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-medium {
+        border-color: rgba(var(--sd-chip--neutral-high-color-border, 195 195 195));
+        background-color: rgba(var(--sd-chip--neutral-high-color-outline-fill, 255 255 255 / 0));
       }
-.sd-7-0-0-next-10-chip--outline.sd-7-0-0-next-10-chip--color-neutral.sd-7-0-0-next-10-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-7-0-0-next-12-chip--outline.sd-7-0-0-next-12-chip--color-neutral.sd-7-0-0-next-12-chip--shade-high {
+        border-color: rgba(var(--sd-chip--neutral-strong-color-border, 174 174 174));
+        background-color: rgba(var(--sd-chip--neutral-strong-color-outline-fill, 255 255 255 / 0));
       }
 @property --tw-border-style {
   syntax: "*";

package/dist-versioned/modules/container.css

@@ -1,38 +1,38 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
-.sd-7-0-0-next-10-container {
+.sd-7-0-0-next-12-container {
   position: relative;
-  background-color: rgba(var(--sd-color-background-neutral-100));
-  padding-inline: var(--sd-spacing-10);
-  padding-block: var(--sd-spacing-8);
+  background-color: rgba(var(--sd-color-background-neutral-100, 246 246 246));
+  padding-inline: var(--sd-spacing-10, 2.5rem);
+  padding-block: var(--sd-spacing-8, 2rem);
 }
-.sd-7-0-0-next-10-container--variant-primary-100 {
-    background-color: rgba(var(--sd-color-background-primary-100));
+.sd-7-0-0-next-12-container--variant-primary-100 {
+    background-color: rgba(var(--sd-color-background-primary-100, 236 240 249));
   }
-.sd-7-0-0-next-10-container--variant-primary-800 {
-    background-color: rgba(var(--sd-container--primary-800-color-background, rgba(var(--sd-color-primary-800))));
+.sd-7-0-0-next-12-container--variant-primary-800 {
+    background-color: rgba(var(--sd-container--primary-800-color-background, 5 21 48));
   }
-.sd-7-0-0-next-10-container--variant-primary {
-    background-color: rgba(var(--sd-color-background-primary));
+.sd-7-0-0-next-12-container--variant-primary {
+    background-color: rgba(var(--sd-color-background-primary, 0 53 142));
   }
-.sd-7-0-0-next-10-container--variant-border-neutral-400 {
+.sd-7-0-0-next-12-container--variant-border-neutral-400 {
     --tw-border-style: solid;
     border-style: solid;
-    border-color: rgba(var(--sd-color-border-neutral-400));
-    background-color: rgba(var(--sd-color-background-white));
+    border-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
+    background-color: rgba(var(--sd-color-background-white, 255 255 255));
     border-width: 1px;
   }
-.sd-7-0-0-next-10-container--variant-white {
-    background-color: rgba(var(--sd-color-background-white));
+.sd-7-0-0-next-12-container--variant-white {
+    background-color: rgba(var(--sd-color-background-white, 255 255 255));
   }
-.sd-7-0-0-next-10-container--padding-sm {
-    padding-inline: var(--sd-spacing-6);
-    padding-block: var(--sd-spacing-4);
+.sd-7-0-0-next-12-container--padding-sm {
+    padding-inline: var(--sd-spacing-6, 1.5rem);
+    padding-block: var(--sd-spacing-4, 1rem);
   }
-.sd-7-0-0-next-10-container{
-  --triangle-background: rgba(var(--sd-color-background-white));
+.sd-7-0-0-next-12-container{
+  --triangle-background: rgba(var(--sd-color-background-white, 255 255 255));
 }
-.sd-7-0-0-next-10-container--triangle-top::before, .sd-7-0-0-next-10-container--triangle-right::before, .sd-7-0-0-next-10-container--triangle-bottom::before, .sd-7-0-0-next-10-container--triangle-left::before {
+.sd-7-0-0-next-12-container--triangle-top::before, .sd-7-0-0-next-12-container--triangle-right::before, .sd-7-0-0-next-12-container--triangle-bottom::before, .sd-7-0-0-next-12-container--triangle-left::before {
     position: absolute;
     display: block;
     --tw-border-style: solid;
@@ -41,27 +41,27 @@
     border-width: 14px;
     content: '';
   }
-.sd-7-0-0-next-10-container--triangle-top::before {
+.sd-7-0-0-next-12-container--triangle-top::before {
     top: 0;
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
   }
-.sd-7-0-0-next-10-container--triangle-right::before {
+.sd-7-0-0-next-12-container--triangle-right::before {
     right: 0;
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
   }
-.sd-7-0-0-next-10-container--triangle-bottom::before {
+.sd-7-0-0-next-12-container--triangle-bottom::before {
     bottom: 0;
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
   }
-.sd-7-0-0-next-10-container--triangle-left::before {
+.sd-7-0-0-next-12-container--triangle-left::before {
     left: 0;
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
   }
-.sd-7-0-0-next-10-container--triangle-top-border::after, .sd-7-0-0-next-10-container--triangle-top-border::before, .sd-7-0-0-next-10-container--triangle-right-border::after, .sd-7-0-0-next-10-container--triangle-right-border::before, .sd-7-0-0-next-10-container--triangle-bottom-border::after, .sd-7-0-0-next-10-container--triangle-bottom-border::before, .sd-7-0-0-next-10-container--triangle-left-border::after, .sd-7-0-0-next-10-container--triangle-left-border::before {
+.sd-7-0-0-next-12-container--triangle-top-border::after, .sd-7-0-0-next-12-container--triangle-top-border::before, .sd-7-0-0-next-12-container--triangle-right-border::after, .sd-7-0-0-next-12-container--triangle-right-border::before, .sd-7-0-0-next-12-container--triangle-bottom-border::after, .sd-7-0-0-next-12-container--triangle-bottom-border::before, .sd-7-0-0-next-12-container--triangle-left-border::after, .sd-7-0-0-next-12-container--triangle-left-border::before {
       position: absolute;
       display: block;
       --tw-border-style: solid;
@@ -69,53 +69,53 @@
       border-color: transparent;
       content: '';
     }
-.sd-7-0-0-next-10-container--triangle-top-border::after, .sd-7-0-0-next-10-container--triangle-right-border::after, .sd-7-0-0-next-10-container--triangle-bottom-border::after, .sd-7-0-0-next-10-container--triangle-left-border::after {
+.sd-7-0-0-next-12-container--triangle-top-border::after, .sd-7-0-0-next-12-container--triangle-right-border::after, .sd-7-0-0-next-12-container--triangle-bottom-border::after, .sd-7-0-0-next-12-container--triangle-left-border::after {
       border-width: 14px;
     }
-.sd-7-0-0-next-10-container--triangle-top-border::before, .sd-7-0-0-next-10-container--triangle-right-border::before, .sd-7-0-0-next-10-container--triangle-bottom-border::before, .sd-7-0-0-next-10-container--triangle-left-border::before {
+.sd-7-0-0-next-12-container--triangle-top-border::before, .sd-7-0-0-next-12-container--triangle-right-border::before, .sd-7-0-0-next-12-container--triangle-bottom-border::before, .sd-7-0-0-next-12-container--triangle-left-border::before {
       border-width: 15px;
     }
-.sd-7-0-0-next-10-container--triangle-top-border::after, .sd-7-0-0-next-10-container--triangle-top-border::before {
+.sd-7-0-0-next-12-container--triangle-top-border::after, .sd-7-0-0-next-12-container--triangle-top-border::before {
       top: -1px;
     }
-.sd-7-0-0-next-10-container--triangle-top-border::before {
-      border-top-color: rgba(var(--sd-color-border-neutral-400));
+.sd-7-0-0-next-12-container--triangle-top-border::before {
+      border-top-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       left: calc(50% - 15px);
     }
-.sd-7-0-0-next-10-container--triangle-top-border::after {
+.sd-7-0-0-next-12-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
-.sd-7-0-0-next-10-container--triangle-right-border::after, .sd-7-0-0-next-10-container--triangle-right-border::before {
+.sd-7-0-0-next-12-container--triangle-right-border::after, .sd-7-0-0-next-12-container--triangle-right-border::before {
       right: -1px;
     }
-.sd-7-0-0-next-10-container--triangle-right-border::before {
-      border-right-color: rgba(var(--sd-color-border-neutral-400));
+.sd-7-0-0-next-12-container--triangle-right-border::before {
+      border-right-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       top: calc(50% - 15px);
     }
-.sd-7-0-0-next-10-container--triangle-right-border::after {
+.sd-7-0-0-next-12-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
-.sd-7-0-0-next-10-container--triangle-bottom-border::after, .sd-7-0-0-next-10-container--triangle-bottom-border::before {
+.sd-7-0-0-next-12-container--triangle-bottom-border::after, .sd-7-0-0-next-12-container--triangle-bottom-border::before {
       bottom: -1px;
     }
-.sd-7-0-0-next-10-container--triangle-bottom-border::before {
-      border-bottom-color: rgba(var(--sd-color-border-neutral-400));
+.sd-7-0-0-next-12-container--triangle-bottom-border::before {
+      border-bottom-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       left: calc(50% - 15px);
     }
-.sd-7-0-0-next-10-container--triangle-bottom-border::after {
+.sd-7-0-0-next-12-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
-.sd-7-0-0-next-10-container--triangle-left-border::after, .sd-7-0-0-next-10-container--triangle-left-border::before {
+.sd-7-0-0-next-12-container--triangle-left-border::after, .sd-7-0-0-next-12-container--triangle-left-border::before {
       left: -1px;
     }
-.sd-7-0-0-next-10-container--triangle-left-border::before {
-      border-left-color: rgba(var(--sd-color-border-neutral-400));
+.sd-7-0-0-next-12-container--triangle-left-border::before {
+      border-left-color: rgba(var(--sd-color-border-neutral-400, 195 195 195));
       top: calc(50% - 15px);
     }
-.sd-7-0-0-next-10-container--triangle-left-border::after {
+.sd-7-0-0-next-12-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.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-7-0-0-next-10-copyright {
+.sd-7-0-0-next-12-copyright {
   position: relative;
   --tw-blur: ;
   --tw-brightness: ;
@@ -12,49 +12,49 @@
   --tw-saturate: ;
   --tw-sepia: ;
 }
-.sd-7-0-0-next-10-copyright::after {
+.sd-7-0-0-next-12-copyright::after {
     position: absolute;
     bottom: 0;
     left: 0;
     display: block;
     width: 100%;
-    padding-bottom: var(--sd-spacing-2);
-    padding-left: var(--sd-spacing-4);
-    font-size: var(--sd-text-sm);
+    padding-bottom: var(--sd-spacing-2, 0.5rem);
+    padding-left: var(--sd-spacing-4, 1rem);
+    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-white));
-    --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs));
-    --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs));
+    color: rgba(var(--sd-color-text-white, 255 255 255));
+    --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs, 0.5px 0.5px 1.5px #515151));
+    --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs, 0.5px 0.5px 1.5px #515151));
     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-7-0-0-next-10-copyright--orientation-vertical::after {
+.sd-7-0-0-next-12-copyright--orientation-vertical::after {
         width: -moz-max-content;
         width: max-content;
-        padding-top: var(--sd-spacing-2);
-        padding-right: var(--sd-spacing-1);
+        padding-top: var(--sd-spacing-2, 0.5rem);
+        padding-right: var(--sd-spacing-1, 0.25rem);
         padding-bottom: 0;
         padding-left: 0;
         writing-mode: vertical-rl;
         text-orientation: sideways-right;
         transform: rotate(180deg);
       }
-.sd-7-0-0-next-10-copyright--color-black::after {
-        color: rgba(var(--sd-color-text-black));
+.sd-7-0-0-next-12-copyright--color-black::after {
+        color: rgba(var(--sd-color-text-black, 24 24 24));
         filter: drop-shadow(0 0 transparent);
       }
-.sd-7-0-0-next-10-copyright--no-shadow::after {
+.sd-7-0-0-next-12-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
-.sd-7-0-0-next-10-copyright--placement-top::after {
+.sd-7-0-0-next-12-copyright--placement-top::after {
         position: absolute;
         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);
+        padding-top: var(--sd-spacing-2, 0.5rem);
+        padding-right: var(--sd-spacing-4, 1rem);
       }
 @property --tw-blur {
   syntax: "*";

package/dist-versioned/modules/display.css

@@ -1,47 +1,47 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-7-0-0-next-10-display {
-  font-size: var(--sd-text-3xl);
+.sd-7-0-0-next-12-display {
+  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-7-0-0-next-10-display {
-    font-size: var(--sd-text-4xl);
+.sd-7-0-0-next-12-display {
+    font-size: var(--sd-text-4xl, 2.5rem);
     line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
   }
-.sd-7-0-0-next-10-display--size-xl {
-      font-size: var(--sd-text-xl);
+.sd-7-0-0-next-12-display--size-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-7-0-0-next-10-display--size-3xl {
-      font-size: var(--sd-text-2xl);
+.sd-7-0-0-next-12-display--size-3xl {
+      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-7-0-0-next-10-display--size-3xl {
-        font-size: var(--sd-text-3xl);
+.sd-7-0-0-next-12-display--size-3xl {
+        font-size: var(--sd-text-3xl, 2rem);
         line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
     }
       }
-.sd-7-0-0-next-10-display--inverted {
-    color: rgba(var(--sd-color-text-white));
+.sd-7-0-0-next-12-display--inverted {
+    color: rgba(var(--sd-color-text-white, 255 255 255));
   }
 @property --tw-leading {
   syntax: "*";