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

package/dist/modules/flag.css

@@ -1,59 +1,23 @@
-/**
- * Generates basic styles for flag elements.
- * @name sd-flag
- * @status stable
- * @since 1.34.0
- * @variant { neutral-300 | neutral-500 | white } sd-flag--...
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .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 */
+  display: inline-flex;
+  height: var(--sd-spacing-8);
+  align-items: center;
+  overflow: hidden;
+  background-color: var(--sd-color-background-neutral-200, var(--sd-color-neutral-200));
+  padding-inline: var(--sd-spacing-3);
+  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-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 */
-}
-
+    background-color: var(--sd-flag--neutral-500-color-background, var(--sd-color-neutral-500));
+    color: var(--sd-color-text-black, var(--sd-color-black));
+  }
 .sd-flag--neutral-300 {
-
-    
-
-    background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */
-}
-
+    background-color: var(--sd-color-background-neutral-300, var(--sd-color-neutral-300));
+  }
 .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 */
-}
+    background-color: var(--sd-color-background-white, var(--sd-color-white));
+  }

package/dist/modules/footnotes.css

@@ -1,179 +1,166 @@
-/**
- * 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.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 .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 */;
+  margin-block: calc(var(--sd-spacing-1) * 0);
+  padding: calc(var(--sd-spacing-1) * 0);
+  text-align: left;
+  font-size: var(--sd-text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: var(--sd-color-text-neutral-700, var(--sd-color-neutral-700));
 }
-
 .sd-footnotes :target {
-      
-      background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
-}
-
+    background-color: var(--sd-color-background-neutral-200, var(--sd-color-neutral-200));
+  }
 .sd-footnotes:is(ol) {
-      padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
+    padding-inline-start: var(--sd-spacing-8);
+  }
 .sd-footnotes:is(ol) li {
       counter-increment: list-item;
       position: relative;
       list-style-type: none;
     }
-
 .sd-footnotes:is(ol) li .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::before {
-      position: absolute;
-      left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
-      flex-shrink: 0;
-      font-weight: 700;
-      line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+          position: absolute;
+          left: calc(var(--sd-spacing-8) * -1);
+          flex-shrink: 0;
+          --tw-leading: var(--leading-normal, 1.5);
+          line-height: var(--leading-normal, 1.5);
+          --tw-font-weight: var(--sd-font-weight-bold);
+          font-weight: var(--sd-font-weight-bold);
           content: '[ ' counter(list-item) ' ]';
           padding-top: 1px;
           font-size: 10px;
-}
-
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker::after, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::after, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::after {
           content: none;
         }
-
 .sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker {
-      display: inline-block;
+          display: inline-block;
           counter-increment: footnotes-multiple;
-}
-
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker::before {
-      position: relative;
-      left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-      vertical-align: super;
-      font-weight: 700;
-      line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+            position: relative;
+            left: calc(var(--sd-spacing-1) * 0);
+            vertical-align: super;
+            --tw-leading: var(--leading-normal, 1.5);
+            line-height: var(--leading-normal, 1.5);
+            --tw-font-weight: var(--sd-font-weight-bold);
+            font-weight: var(--sd-font-weight-bold);
             content: counter(footnotes-multiple, lower-alpha);
-}
-
+          }
 .sd-footnotes:is(ol) li .sd-footnotes--marker {
-      bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-      display: block;
-}
-
+        bottom: calc(var(--sd-spacing-1) * 0);
+        display: block;
+      }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible {
-      outline-width: 0px;
-}
-
+          outline-style: var(--tw-outline-style);
+          outline-width: 0px;
+        }
 .sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible::before {
-      border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-      outline-style: solid;
-      outline-width: 2px;
-      outline-offset: 2px;
-      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
+            border-radius: var(--sd-radius);
+            outline-width: 1px;
+            outline-style: var(--tw-outline-style);
+            outline-width: 2px;
+            outline-offset: 2px;
+            outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+          }
 .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 */;
-}
-
+    color: var(--sd-color-text-primary-400, var(--sd-color-primary-400));
+  }
 .sd-footnotes--inverted :target {
-      
-      background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
-}
-
+      background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+    }
 .sd-footnotes--inverted .sd-footnotes--marker::before {
-      
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-      outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
-}
-
+      color: var(--sd-color-text-white, var(--sd-color-white));
+      outline-color: var(--color-white, #fff) !important;
+    }
 .sd-footnotes--inverted:is(.sd-footnotes--marker) {
-      --tw-text-opacity: 1 !important;
-      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
-      outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
-}
-
+      color: var(--sd-color-text-white, var(--sd-color-white)) !important;
+      outline-color: var(--color-white, #fff) !important;
+    }
 .sd-footnotes--inverted:is(.sd-footnotes--marker):target {
-      
-      background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
-}
-
+        background-color: var(--sd-footnotes--target--inverted-color-background, var(--sd-color-primary-800));
+      }
 .sd-footnotes--marker {
-      position: relative;
-      bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
-      display: inline-block;
-      white-space: nowrap;
-      font-weight: 700;
-      text-decoration-line: none !important;
+    position: relative;
+    bottom: var(--sd-spacing-2);
+    display: inline-block;
+    --tw-font-weight: var(--sd-font-weight-bold);
+    font-weight: var(--sd-font-weight-bold);
+    white-space: nowrap;
+    text-decoration-line: none !important;
     font-size: x-small;
-}
-
+  }
 .sd-footnotes--marker:target {
-      
-      background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
-}
-
+      background-color: var(--sd-color-background-neutral-200, var(--sd-color-neutral-200));
+    }
 .sd-footnotes--marker:not(:has(a))::before {
         content: '[ ';
         display: inline-block;
       }
-
 .sd-footnotes--marker:not(:has(a))::after {
         content: ' ]';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a) {
       display: inline-block;
+      --tw-font-weight: var(--sd-font-weight-bold);
+      font-weight: var(--sd-font-weight-bold);
       white-space: nowrap;
-      font-weight: 700;
       text-decoration-line: none !important;
-}
-
+    }
 .sd-footnotes--marker :is(a)::before {
         content: '[ ';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a)::after {
         content: ' ]';
         display: inline-block;
       }
-
 .sd-footnotes--marker :is(a):focus-visible {
-      border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-      outline-style: solid;
-      outline-width: 2px;
-      outline-offset: 2px;
-      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
+        border-radius: var(--sd-radius);
+        outline-width: 1px;
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+      }
 .sd-footnotes--marker :is(a):link {
-      
-      color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-.sd-footnotes--marker:link,
-    .sd-footnotes--marker:visited {
-      
-      color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
+        color: var(--sd-color-text-primary, var(--sd-color-primary));
+      }
+.sd-footnotes--marker:link, .sd-footnotes--marker:visited {
+      color: var(--sd-color-text-primary, var(--sd-color-primary));
+    }
 .sd-footnotes--marker:focus-visible {
-      border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
-      outline-style: solid;
+      border-radius: var(--sd-radius);
+      outline-width: 1px;
+      outline-style: var(--tw-outline-style);
       outline-width: 2px;
       outline-offset: 2px;
-      outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+      outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+    }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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;
+      --tw-outline-style: solid;
+    }
+  }
 }