@solid-design-system/styles 1.0.1 → 1.2.0

package/dist-versioned/modules/status-badge.css

@@ -0,0 +1,61 @@
+/**
+ * Description of the style.
+ * @name sd-1-2-0-status-badge
+ * @status stable
+ * @since 1.0
+ * @variant { sucess | warning | error | info } sd-1-2-0-status-badge--...
+ */
+
+.sd-1-2-0-status-badge {
+
+    display: inline-flex;
+
+    align-items: center
+}
+
+.sd-1-2-0-status-badge sd-icon {
+
+    margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+
+    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
+}
+
+.sd-1-2-0-status-badge--success sd-icon {
+
+    
+
+    background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */
+}
+
+.sd-1-2-0-status-badge--warning sd-icon {
+
+    
+
+    background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */
+}
+
+.sd-1-2-0-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 */
+}
+
+.sd-1-2-0-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 */
+}

package/dist-versioned/modules/table-cell.css

@@ -1,17 +1,17 @@
 /**
  * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-1-0-1-table-cell
+ * @name sd-1-2-0-table-cell
  * @status stable
  * @since 1.13
- * @boolean sd-1-0-1-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-1-0-1-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-1-0-1-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-1-0-1-table-cell--shadow-... Applies the selected shadow to the table cell.
+ * @boolean sd-1-2-0-table-cell--divider Displays a divider to the right.
+ * @variant { white | primary-100 | neutral-100 } sd-1-2-0-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-1-2-0-table-cell--shadow-active Displays the table shadow.
+ * @variant { top | left | right | bottom } sd-1-2-0-table-cell--shadow-... Applies the selected shadow to the table cell.
  */
 
-.sd-1-0-1-prose td,
-.sd-1-0-1-prose th,
-.sd-1-0-1-table-cell {
+.sd-1-2-0-prose td,
+.sd-1-2-0-prose th,
+.sd-1-2-0-table-cell {
 
     border-top-width: 1px;
 
@@ -41,12 +41,12 @@ Used for divider, teaser, container, ...  */;
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-0-1-table-cell--divider {
+.sd-1-2-0-table-cell--divider {
 
     border-right-width: 1px
 }
 
-.sd-1-0-1-table-cell--shadow-top:after, .sd-1-0-1-table-cell--shadow-bottom:after, .sd-1-0-1-table-cell--shadow-left:after, .sd-1-0-1-table-cell--shadow-right:after {
+.sd-1-2-0-table-cell--shadow-top:after, .sd-1-2-0-table-cell--shadow-bottom:after, .sd-1-2-0-table-cell--shadow-left:after, .sd-1-2-0-table-cell--shadow-right:after {
 
     pointer-events: none;
 
@@ -73,7 +73,7 @@ Used for divider, teaser, container, ...  */;
     content: var(--tw-content)
 }
 
-.sd-1-0-1-table-cell--shadow-top:after, .sd-1-0-1-table-cell--shadow-bottom:after {
+.sd-1-2-0-table-cell--shadow-top:after, .sd-1-2-0-table-cell--shadow-bottom:after {
 
     left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 
@@ -84,7 +84,7 @@ Used for divider, teaser, container, ...  */;
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-0-1-table-cell--shadow-top:before, .sd-1-0-1-table-cell--shadow-bottom:before {
+.sd-1-2-0-table-cell--shadow-top:before, .sd-1-2-0-table-cell--shadow-bottom:before {
 
     position: absolute;
 
@@ -108,7 +108,7 @@ Used for divider, teaser, container, ...  */;
     content: var(--tw-content)
 }
 
-.sd-1-0-1-table-cell--shadow-left:after, .sd-1-0-1-table-cell--shadow-right:after {
+.sd-1-2-0-table-cell--shadow-left:after, .sd-1-2-0-table-cell--shadow-right:after {
 
     top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 
@@ -117,12 +117,12 @@ Used for divider, teaser, container, ...  */;
     width: var(--sd-spacing-2-5, 0.625rem) /* 10px */
 }
 
-.sd-1-0-1-table-cell.sd-1-0-1-table-cell--shadow-active:after {
+.sd-1-2-0-table-cell.sd-1-2-0-table-cell--shadow-active:after {
 
     opacity: 100%
 }
 
-.sd-1-0-1-table-cell--shadow-top:after {
+.sd-1-2-0-table-cell--shadow-top:after {
 
     top: -10px;
 
@@ -131,12 +131,12 @@ Used for divider, teaser, container, ...  */;
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-0-1-table-cell--shadow-top:before {
+.sd-1-2-0-table-cell--shadow-top:before {
 
     bottom: -1px
 }
 
-.sd-1-0-1-table-cell--shadow-bottom:after {
+.sd-1-2-0-table-cell--shadow-bottom:after {
 
     bottom: -10px;
 
@@ -145,40 +145,40 @@ Used for divider, teaser, container, ...  */;
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-0-1-table-cell--shadow-bottom:before {
+.sd-1-2-0-table-cell--shadow-bottom:before {
 
     top: -1px
 }
 
-.sd-1-0-1-table-cell--shadow-left:after {
+.sd-1-2-0-table-cell--shadow-left:after {
 
     left: -10px;
 
     background-image: linear-gradient(to left, var(--tw-gradient-stops))
 }
 
-.sd-1-0-1-table-cell--shadow-right:after {
+.sd-1-2-0-table-cell--shadow-right:after {
 
     right: -10px;
 
     background-image: linear-gradient(to right, var(--tw-gradient-stops))
 }
 
-.sd-1-0-1-table-cell--bg-white {
+.sd-1-2-0-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 */
 }
 
-.sd-1-0-1-table-cell--bg-primary-100 {
+.sd-1-2-0-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) */
 }
 
-.sd-1-0-1-table-cell--bg-neutral-100 {
+.sd-1-2-0-table-cell--bg-neutral-100 {
 
     
 

package/dist-versioned/modules/table.css

@@ -1,6 +1,6 @@
 /**
  * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-1-0-1-table
+ * @name sd-1-2-0-table
  * @status stable
  * @since 1.13
  */
@@ -9,8 +9,8 @@
 * Remove inherited styles from table before applying our styles.
 */
 
-.sd-1-0-1-table,
-.sd-1-0-1-prose table {
+.sd-1-2-0-table,
+.sd-1-2-0-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
@@ -19,6 +19,6 @@
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
-.sd-1-0-1-table thead tr:first-of-type, .sd-1-0-1-table tfoot tr:first-of-type, .sd-1-0-1-prose table thead tr:first-of-type, .sd-1-0-1-prose table tfoot tr:first-of-type {
+.sd-1-2-0-table thead tr:first-of-type, .sd-1-2-0-table tfoot tr:first-of-type, .sd-1-2-0-prose table thead tr:first-of-type, .sd-1-2-0-prose table tfoot tr:first-of-type {
   position: relative;
 }