@solid-design-system/styles 1.5.4 → 2.0.0-next.0

package/dist/modules/chip.css

@@ -1,61 +1,24 @@
-/**
- * Generates basic styles for chip elements.
- * @name sd-chip
- * @status stable
- * @since 1.30.0
- * @variant { primary-300 | primary-500 | white } sd-chip--...
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .sd-chip {
-
-    display: inline-flex;
-
-    height: var(--sd-spacing-6, 1.5rem) /* 24px */;
-
-    align-items: center;
-
-    overflow: hidden;
-
-    white-space: nowrap;
-
-    border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-
-    
-
-    background-color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) on primary-100 */;
-
-    padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
-
-    padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-
-    font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+  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, var(--sd-color-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, var(--sd-color-black));
 }
-
 .sd-chip--primary-500 {
-
-    
-
-    background-color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
-
-    
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
-}
-
+    background-color: var(--sd-color-background-primary-500, var(--sd-color-primary-500));
+    color: var(--sd-color-text-white, var(--sd-color-white));
+  }
 .sd-chip--primary-300 {
-
-    
-
-    background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */
-}
-
+    background-color: var(--sd-color-background-primary-300, var(--sd-color-primary-300));
+  }
 .sd-chip--white {
-
-    
-
-    background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */
-}
+    background-color: var(--sd-color-background-white, var(--sd-color-white));
+  }

package/dist/modules/container.css

@@ -1,183 +1,116 @@
-/**
- * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
- * @name sd-container
- * @status stable
- * @since 1.30.0
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-container--variant-... Defines the background color and border of sd-container.
- * @variant { sm } sd-container--padding-... Defines the padding of sd-container. This makes it adaptable to both small and large screens.
- * @variant { top | right | bottom | left } sd-container--triangle-... Defines an optional triangle cut-out for sd-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .sd-container {
   position: relative;
-  
-  background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  padding-right: var(--sd-spacing-10, 2.5rem) /* 40px */;
-  padding-top: var(--sd-spacing-8, 2rem) /* 32px */;
-  padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
+  background-color: var(--sd-color-background-neutral-100, var(--sd-color-neutral-100));
+  padding-inline: var(--sd-spacing-10);
+  padding-block: var(--sd-spacing-8);
 }
-
 .sd-container--variant-primary-100 {
-  
-  background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
-}
-
+    background-color: var(--sd-color-background-primary-100, var(--sd-color-primary-100));
+  }
 .sd-container--variant-primary {
-  
-  background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
-Used for button */;
-}
-
+    background-color: var(--sd-color-background-primary, var(--sd-color-primary));
+  }
 .sd-container--variant-border-neutral-400 {
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
+    background-color: var(--sd-color-background-white, var(--sd-color-white));
     border-width: 1px;
-}
-
+  }
 .sd-container--variant-white {
-  
-  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
-}
-
+    background-color: var(--sd-color-background-white, var(--sd-color-white));
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;}
 .sd-container--padding-sm {
-  padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-}
-
+    padding-inline: var(--sd-spacing-6);
+    padding-block: var(--sd-spacing-4);
+  }
 .sd-container {
-
-  --triangle-background: white;
-}
-
-.sd-container--triangle-top::before,
-  .sd-container--triangle-right::before,
-  .sd-container--triangle-bottom::before,
-  .sd-container--triangle-left::before {
-  position: absolute;
-  display: block;
-  border-style: solid;
-  border-color: transparent;
+  --triangle-background: var(--sd-color-white);
+}
+.sd-container--triangle-top::before, .sd-container--triangle-right::before, .sd-container--triangle-bottom::before, .sd-container--triangle-left::before {
+    position: absolute;
+    display: block;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: transparent;
     border-width: 14px;
     content: '';
-}
-
+  }
 .sd-container--triangle-top::before {
-  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    top: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-right::before {
-  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    right: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-bottom::before {
-  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
-}
-
+  }
 .sd-container--triangle-left::before {
-  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    left: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
-}
-
-.sd-container--triangle-top-border::after,
-    .sd-container--triangle-top-border::before,
-    .sd-container--triangle-right-border::after,
-    .sd-container--triangle-right-border::before,
-    .sd-container--triangle-bottom-border::after,
-    .sd-container--triangle-bottom-border::before,
-    .sd-container--triangle-left-border::after,
-    .sd-container--triangle-left-border::before {
-  position: absolute;
-  display: block;
-  border-style: solid;
-  border-color: transparent;
+  }
+.sd-container--triangle-top-border::after, .sd-container--triangle-top-border::before, .sd-container--triangle-right-border::after, .sd-container--triangle-right-border::before, .sd-container--triangle-bottom-border::after, .sd-container--triangle-bottom-border::before, .sd-container--triangle-left-border::after, .sd-container--triangle-left-border::before {
+      position: absolute;
+      display: block;
+      --tw-border-style: solid;
+      border-style: solid;
+      border-color: transparent;
       content: '';
-}
-
+    }
 .sd-container--triangle-top-border::after, .sd-container--triangle-right-border::after, .sd-container--triangle-bottom-border::after, .sd-container--triangle-left-border::after {
       border-width: 14px;
     }
-
 .sd-container--triangle-top-border::before, .sd-container--triangle-right-border::before, .sd-container--triangle-bottom-border::before, .sd-container--triangle-left-border::before {
       border-width: 15px;
     }
-
-.sd-container--triangle-top-border::after,
-    .sd-container--triangle-top-border::before {
+.sd-container--triangle-top-border::after, .sd-container--triangle-top-border::before {
       top: -1px;
     }
-
 .sd-container--triangle-top-border::before {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-top-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
       left: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
-
-.sd-container--triangle-right-border::after,
-    .sd-container--triangle-right-border::before {
+.sd-container--triangle-right-border::after, .sd-container--triangle-right-border::before {
       right: -1px;
     }
-
 .sd-container--triangle-right-border::before {
-  --tw-border-opacity: 1;
-  border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-right-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
       top: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
-
-.sd-container--triangle-bottom-border::after,
-    .sd-container--triangle-bottom-border::before {
+.sd-container--triangle-bottom-border::after, .sd-container--triangle-bottom-border::before {
       bottom: -1px;
     }
-
 .sd-container--triangle-bottom-border::before {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-bottom-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
       left: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
-
-.sd-container--triangle-left-border::after,
-    .sd-container--triangle-left-border::before {
+.sd-container--triangle-left-border::after, .sd-container--triangle-left-border::before {
       left: -1px;
     }
-
 .sd-container--triangle-left-border::before {
-  --tw-border-opacity: 1;
-  border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
-Used for divider, teaser, container, ...  */;
+      border-left-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
       top: calc(50% - 15px);
-}
-
+    }
 .sd-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);

package/dist/modules/copyright.css

@@ -1,17 +1,7 @@
-/**
- * Generates basic styles for copyright elements.
- * @name sd-copyright
- * @status stable
- * @since 2.5.0
- * @variant { vertical } sd-copyright--orientation-... The copyright's orientation.
- * @variant { black } sd-copyright--color-... The copyright's text color.
- * @boolean sd-copyright--... Removes the shadow.
- * @variant { top } sd-copyright--placement-... The copyright's placement.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 .sd-copyright {
-  position:relative;
-  /* Bug fix for drop-shadow-sm */
+  position: relative;
   --tw-blur: ;
   --tw-brightness: ;
   --tw-contrast: ;
@@ -21,52 +11,119 @@
   --tw-saturate: ;
   --tw-sepia: ;
 }
-
 .sd-copyright::after {
-  position:absolute;
-  bottom:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  left:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display:block;
-  width:100%;
-  padding-bottom:var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-left:var(--sd-spacing-4, 1rem) /* 16px */;
-  font-size:var(--sd-font-size-sm, 0.875rem) /* 14px */;
-  --tw-text-opacity:1;
-  color:rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-  --tw-drop-shadow:drop-shadow(var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81)));
-  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);
+    position: absolute;
+    bottom: calc(var(--sd-spacing-1) * 0);
+    left: calc(var(--sd-spacing-1) * 0);
+    display: block;
+    width: 100%;
+    padding-bottom: var(--sd-spacing-2);
+    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, var(--sd-color-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-copyright--orientation-vertical::after {
-  width:-moz-max-content;
-  width:max-content;
-  padding-top:var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-bottom:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  padding-right:var(--sd-spacing-1, 0.25rem) /* 4px */;
-  padding-left:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+        width: -moz-max-content;
+        width: max-content;
+        padding-top: var(--sd-spacing-2);
+        padding-right: var(--sd-spacing-1);
+        padding-bottom: calc(var(--sd-spacing-1) * 0);
+        padding-left: calc(var(--sd-spacing-1) * 0);
         writing-mode: vertical-rl;
         text-orientation: sideways-right;
         transform: rotate(180deg);
-}
-
+      }
 .sd-copyright--color-black::after {
-  --tw-text-opacity:1;
-  color:rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+        color: var(--sd-color-text-black, var(--sd-color-black));
         filter: drop-shadow(0 0 transparent);
-}
-
+      }
 .sd-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
-
 .sd-copyright--placement-top::after {
-  position:absolute;
-  top:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  right:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  display:block;
-  max-height:-moz-fit-content;
-  max-height:fit-content;
-  padding-top:var(--sd-spacing-2, 0.5rem) /* 8px */;
-  padding-right:var(--sd-spacing-4, 1rem) /* 16px */;
+        position: absolute;
+        top: calc(var(--sd-spacing-1) * 0);
+        right: calc(var(--sd-spacing-1) * 0);
+        display: block;
+        max-height: -moz-fit-content;
+        max-height: fit-content;
+        padding-top: var(--sd-spacing-2);
+        padding-right: var(--sd-spacing-4);
+      }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
 }

package/dist/modules/display.css

@@ -1,70 +1,60 @@
-/**
- * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-display
- * @status stable
- * @since 1.7
- * @variant { xl | 3xl } sd-display--size-... The display's size.
- * @boolean sd-display--inverted Inverts the display text.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 .sd-display {
-
-    font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
-
-    font-weight: 400;
-
-    line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+  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, var(--sd-color-black));
 }
-
-@media (min-width: 1024px) {
-
-    .sd-display {
-
-        font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
-    }
+@media (width >= 64rem) {
+.sd-display {
+    font-size: var(--sd-text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
-
+  }
 .sd-display--size-xl {
-
-    font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
-
-    font-weight: 400;
-
-    line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
-}
-
+      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, var(--sd-color-black));
+    }
 .sd-display--size-3xl {
-
-    font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
-
-    font-weight: 400;
-
-    line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
-}
-
-@media (min-width: 1024px) {
-
-    .sd-display--size-3xl {
-
-        font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
+      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, var(--sd-color-black));
     }
-}
-
+@media (width >= 64rem) {
+.sd-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-display--inverted {
-
-    
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+    color: var(--sd-color-text-white, var(--sd-color-white));
+  }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+    }
+  }
 }