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

package/dist/modules/status-badge.css

@@ -1,61 +1,26 @@
-/**
- * Description of the style.
- * @name sd-status-badge
- * @status stable
- * @since 1.0
- * @variant { sucess | warning | error | info } sd-status-badge--...
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .sd-status-badge {
-
-    display: inline-flex;
-
-    align-items: center
+  display: inline-flex;
+  align-items: center;
 }
-
 .sd-status-badge sd-icon {
-
-    margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
-
+    margin-right: var(--sd-spacing-2);
     display: flex;
-
-    height: var(--sd-spacing-3, 0.75rem) /* 12px */;
-
-    width: var(--sd-spacing-3, 0.75rem) /* 12px */;
-
-    border-radius: var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */;
-
-    padding: var(--sd-spacing-1, 0.25rem) /* 4px */;
-
-    --tw-text-opacity: 1 !important;
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important
-}
-
+    height: var(--sd-spacing-3);
+    width: var(--sd-spacing-3);
+    border-radius: var(--sd-radius-full);
+    padding: var(--sd-spacing-1);
+    color: var(--sd-color-text-white, var(--sd-color-white)) !important;
+  }
 .sd-status-badge--success sd-icon {
-
-    
-
-    background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */
-}
-
+      background-color: var(--sd-color-background-success, var(--sd-color-success));
+    }
 .sd-status-badge--warning sd-icon {
-
-    
-
-    background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */
-}
-
+      background-color: var(--sd-color-background-warning, var(--sd-color-warning));
+    }
 .sd-status-badge--error sd-icon {
-
-    
-
-    background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */
-}
-
+      background-color: var(--sd-color-background-error, var(--sd-color-error));
+    }
 .sd-status-badge--info sd-icon {
-
-    
-
-    background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */
-}
+      background-color: var(--sd-color-background-info, var(--sd-color-info));
+    }

package/dist/modules/table-cell.css

@@ -1,186 +1,170 @@
-/**
- * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-table-cell
- * @status stable
- * @since 1.13
- * @boolean sd-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
- * @boolean sd-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-table-cell--shadow-... Applies the selected shadow to the table cell.
- */
-
-.sd-prose td,
-.sd-prose th,
-.sd-table-cell {
-
-    border-top-width: 1px;
-
-    border-bottom-width: 1px;
-
-    border-left-width: 0px;
-
-    border-right-width: 0px;
-
-    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: transparent;
-
-    padding: var(--sd-spacing-4, 1rem) /* 16px */;
-
-    text-align: left;
-
-    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 */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-prose td, .sd-prose th, .sd-table-cell {
+  border-inline-style: var(--tw-border-style);
+  border-inline-width: 0px;
+  border-block-style: var(--tw-border-style);
+  border-block-width: 1px;
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
+  background-color: transparent;
+  padding: var(--sd-spacing-4);
+  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-black, var(--sd-color-black));
 }
-
 .sd-table-cell--divider {
-
-    border-right-width: 1px
-}
-
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
 .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: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
-
-    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-
-    --tw-gradient-to: transparent var(--tw-gradient-to-position);
-
-    opacity: var(--sd-opacity-0, 0);
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 300ms;
-
-    --tw-content: '';
-
-    content: var(--tw-content)
-}
-
+      pointer-events: none;
+      position: absolute;
+      --tw-gradient-from: color-mix(in oklab, #000 var(--sd-opacity-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);
+      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));
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+      --tw-content: '';
+      content: var(--tw-content);
+    }
 .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
-
-    left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-
-    right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-
-    height: var(--sd-spacing-2-5, 0.625rem) /* 10px */
-}
-
-/* fix that shows line on top of table-cell */
-
+      right: calc(var(--sd-spacing-1) * 0);
+      left: calc(var(--sd-spacing-1) * 0);
+      height: calc(var(--sd-spacing-1) * 2.5);
+    }
 .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
-
-    position: absolute;
-
-    left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-
-    display: block;
-
-    height: 1px;
-
-    width: 100%;
-
-    border-width: 0.5px;
-
-    --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, ...  */;
-
-    --tw-content: '';
-
-    content: var(--tw-content)
-}
-
+      position: absolute;
+      left: calc(var(--sd-spacing-1) * 0);
+      display: block;
+      height: 1px;
+      width: 100%;
+      border-style: var(--tw-border-style);
+      border-width: 0.5px;
+      border-color: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
+      --tw-content: '';
+      content: var(--tw-content);
+    }
 .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
-
-    top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-
-    bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-
-    width: var(--sd-spacing-2-5, 0.625rem) /* 10px */
-}
-
+      top: calc(var(--sd-spacing-1) * 0);
+      bottom: calc(var(--sd-spacing-1) * 0);
+      width: calc(var(--sd-spacing-1) * 2.5);
+    }
 .sd-table-cell.sd-table-cell--shadow-active:after {
-
-    opacity: 100%
-}
-
+    opacity: 100%;
+  }
 .sd-table-cell--shadow-top:after {
-
-    top: -10px;
-
-    background-image: linear-gradient(to top, var(--tw-gradient-stops))
-}
-
-/* fix that shows line on top of table-cell */
-
+      top: -10px;
+      --tw-gradient-position: to top in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-top:before {
-
-    bottom: -1px
-}
-
+      bottom: -1px;
+    }
 .sd-table-cell--shadow-bottom:after {
-
-    bottom: -10px;
-
-    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
-}
-
-/* fix that shows line on top of table-cell */
-
+      bottom: -10px;
+      --tw-gradient-position: to bottom in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-bottom:before {
-
-    top: -1px
-}
-
+      top: -1px;
+    }
 .sd-table-cell--shadow-left:after {
-
-    left: -10px;
-
-    background-image: linear-gradient(to left, var(--tw-gradient-stops))
-}
-
+      left: -10px;
+      --tw-gradient-position: to left in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--shadow-right:after {
-
-    right: -10px;
-
-    background-image: linear-gradient(to right, var(--tw-gradient-stops))
-}
-
+      right: -10px;
+      --tw-gradient-position: to right in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
 .sd-table-cell--bg-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));
+    }
 .sd-table-cell--bg-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-table-cell--bg-neutral-100 {
-
-    
-
-    background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */
+      background-color: var(--sd-color-background-neutral-100, var(--sd-color-neutral-100));
+    }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+@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-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-duration: initial;
+      --tw-content: "";
+    }
+  }
 }

package/dist/modules/table.css

@@ -1,24 +1,31 @@
-/**
- * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-table
- * @status stable
- * @since 1.13
- */
-
-/*
-* Remove inherited styles from table before applying our styles.
-*/
-
-.sd-table,
-.sd-prose table {
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-table, .sd-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
-  --tw-border-spacing-x: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-  --tw-border-spacing-y: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  --tw-border-spacing-x: calc(var(--sd-spacing-1) * 0);
+  --tw-border-spacing-y: calc(var(--sd-spacing-1) * 0);
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
-
 .sd-table thead tr:first-of-type, .sd-table tfoot tr:first-of-type, .sd-prose table thead tr:first-of-type, .sd-prose table tfoot tr:first-of-type {
-  position: relative;
+      position: relative;
+    }
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@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-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
+    }
+  }
 }