@solid-design-system/styles 1.0.0-next.1

package/dist/modules/chip.css

@@ -0,0 +1,61 @@
+/**
+ * Generates basic styles for chip elements.
+ * @name sd-chip
+ * @status stable
+ * @since 1.30.0
+ * @variant { primary-300 | primary-500 | white } sd-chip--...
+ */
+
+.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 */
+}
+
+.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 */
+}
+
+.sd-chip--primary-300 {
+
+    
+
+    background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */
+}
+
+.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 */
+}

package/dist/modules/container.css

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ */
+
+.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 */;
+}
+
+.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) */;
+}
+
+.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 */;
+}
+
+.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 */;
+    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 */;
+}
+
+.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 */;
+}
+
+.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;
+    border-width: 14px;
+    content: '';
+}
+
+.sd-container--triangle-top::before {
+  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+    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) */;
+    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) */;
+    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) */;
+    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;
+      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 {
+      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, ...  */;
+      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 {
+      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, ...  */;
+      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 {
+      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, ...  */;
+      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 {
+      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, ...  */;
+      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

@@ -0,0 +1,63 @@
+/**
+ * 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.
+ */
+
+.sd-copyright {
+    position: relative;
+}
+
+.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 */;
+    
+    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);
+    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) */;
+        writing-mode: vertical-rl;
+        text-orientation: sideways-right;
+        transform: rotate(180deg);
+}
+
+.sd-copyright--color-black::after {
+    
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+        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 */;
+}

package/dist/modules/display.css

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+.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 */
+}
+
+@media (min-width: 1024px) {
+
+    .sd-display {
+
+        font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
+    }
+}
+
+.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 */
+}
+
+.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 */
+    }
+}
+
+.sd-display--inverted {
+
+    
+
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+}

package/dist/modules/flag.css

@@ -0,0 +1,59 @@
+/**
+ * Generates basic styles for flag elements.
+ * @name sd-flag
+ * @status stable
+ * @since 1.34.0
+ * @variant { neutral-300 | neutral-500 | white } sd-flag--...
+ */
+
+.sd-flag {
+
+    display: inline-flex;
+
+    height: var(--sd-spacing-8, 2rem) /* 32px */;
+
+    align-items: center;
+
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    
+
+    background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
+
+    padding-left: var(--sd-spacing-3, 0.75rem) /* 12px */;
+
+    padding-right: var(--sd-spacing-3, 0.75rem) /* 12px */;
+
+    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 */
+}
+
+.sd-flag--neutral-500 {
+
+    
+
+    background-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-bg-opacity, 1)) /* Used for disabled state  */;
+
+    
+
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+}
+
+.sd-flag--neutral-300 {
+
+    
+
+    background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */
+}
+
+.sd-flag--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 */
+}

package/dist/modules/footnotes.css

@@ -0,0 +1,42 @@
+/**
+ * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
+ * @name sd-footnotes
+ * @status stable
+ * @since 3.0.0
+ * @boolean sd-footnotes--inverted Inverts the footnote text.
+ */
+
+.sd-footnotes {
+      margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+      text-align: left;
+      font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
+      
+      color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
+}
+
+.sd-footnotes:is(ol) li {
+      counter-increment: list-item;
+      display: flex;
+      gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+    }
+
+.sd-footnotes:is(ol) li::before {
+      width: var(--sd-spacing-5, 1.25rem) /* 20px */;
+      flex-shrink: 0;
+      line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+        content: counter(list-item);
+        padding-top: 1px;
+        font-size: 10px;
+}
+
+.sd-footnotes:is(ul) {
+    list-style: '';
+  }
+
+.sd-footnotes--inverted {
+      
+      color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
+Used for inverted pressed interaction text link */;
+}