@solid-design-system/styles 1.0.1 → 1.2.0

package/dist-versioned/modules/list.css

@@ -1,102 +1,102 @@
 /**
  * Generates basic styles for list elements.
- * @name sd-1-0-1-list
+ * @name sd-1-2-0-list
  * @status stable
  * @since 1.39.0
- * @boolean sd-1-0-1-list--inverted Inverts the list text.
+ * @boolean sd-1-2-0-list--inverted Inverts the list text.
  */
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon),
-.sd-1-0-1-prose > :is(ol, ul) {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon),
+.sd-1-2-0-prose > :is(ol, ul) {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li:not(:first-child), .sd-1-0-1-prose > :is(ol, ul) li:not(:first-child) {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li:not(:first-child), .sd-1-2-0-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol,
-  .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul,
-  .sd-1-0-1-prose > :is(ol, ul) ol,
-  .sd-1-0-1-prose > :is(ol, ul) ul {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol,
+  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul,
+  .sd-1-2-0-prose > :is(ol, ul) ol,
+  .sd-1-2-0-prose > :is(ol, ul) ul {
   padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
 /* Counter handling for ordered lists. */
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li, .sd-1-0-1-prose > :is(ol, ul):is(ol) > li, .sd-1-0-1-prose > :is(ol, ul) ol > li {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li, .sd-1-2-0-prose > :is(ol, ul):is(ol) > li, .sd-1-2-0-prose > :is(ol, ul) ol > li {
       counter-increment: item;
     }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ol) > li:before, .sd-1-0-1-prose > :is(ol, ul) ol > li:before {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ol) > li:before, .sd-1-2-0-prose > :is(ol, ul) ol > li:before {
         content: counters(item, '.') '. ';
       }
 
 /* Add second level */
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol),
-  .sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li > ol,
-  .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li > ol,
-  .sd-1-0-1-prose > :is(ol, ul):is(ol),
-  .sd-1-0-1-prose > :is(ol, ul):is(ol) > li > ol,
-  .sd-1-0-1-prose > :is(ol, ul) ol > li > ol {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol),
+  .sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li > ol,
+  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li > ol,
+  .sd-1-2-0-prose > :is(ol, ul):is(ol),
+  .sd-1-2-0-prose > :is(ol, ul):is(ol) > li > ol,
+  .sd-1-2-0-prose > :is(ol, ul) ol > li > ol {
     counter-reset: item;
   }
 
 /* Ordered lists inside unordered lists. */
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul) > li > ol,
-  .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ol,
-  .sd-1-0-1-prose > :is(ol, ul):is(ul) > li > ol,
-  .sd-1-0-1-prose > :is(ol, ul) ul > li > ol {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul) > li > ol,
+  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ol,
+  .sd-1-2-0-prose > :is(ol, ul):is(ul) > li > ol,
+  .sd-1-2-0-prose > :is(ol, ul) ul > li > ol {
     counter-set: item 0;
   }
 
 /* Styling */
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li, .sd-1-0-1-prose > :is(ol, ul) li {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li, .sd-1-2-0-prose > :is(ol, ul) li {
   display: table;
 }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li:before, .sd-1-0-1-prose > :is(ol, ul) li:before {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li:before, .sd-1-2-0-prose > :is(ol, ul) li:before {
   display: table-cell;
   padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
 }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul),
-  .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul,
-  .sd-1-0-1-prose > :is(ol, ul):is(ul),
-  .sd-1-0-1-prose > :is(ol, ul) ul {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul),
+  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul,
+  .sd-1-2-0-prose > :is(ol, ul):is(ul),
+  .sd-1-2-0-prose > :is(ol, ul) ul {
     list-style-type: '';
   }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li:before {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li:before {
       content: '\2022';
     }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li > ul > li:before {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li > ul > li:before {
         content: '\002B1D';
       }
 
-.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li > ul > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
+.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li > ul > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
           content: '\2010';
         }
 
-.sd-1-0-1-list--icon {
+.sd-1-2-0-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-0-1-list--icon li sd-icon:first-of-type,
-    .sd-1-0-1-list--icon li .sd-1-0-1-list--icon__icon:first-of-type {
+.sd-1-2-0-list--icon li sd-icon:first-of-type,
+    .sd-1-2-0-list--icon li .sd-1-2-0-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-0-1-list--icon {
+.sd-1-2-0-list--icon {
   list-style-type: '';
 }
 
@@ -104,19 +104,19 @@
     styles without affecting semantics is to set list-style-type to an empty string.
     https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
 
-.sd-1-0-1-list--icon > li:first-of-type {
+.sd-1-2-0-list--icon > li:first-of-type {
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-0-1-list--icon li {
+.sd-1-2-0-list--icon li {
   position: relative;
   padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
   padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
   line-height: 32px;
 }
 
-.sd-1-0-1-list--icon li > sd-icon:first-of-type,
-    .sd-1-0-1-list--icon li > .sd-1-0-1-list--icon__icon:first-of-type {
+.sd-1-2-0-list--icon li > sd-icon:first-of-type,
+    .sd-1-2-0-list--icon li > .sd-1-2-0-list--icon__icon:first-of-type {
   position: absolute;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
@@ -124,29 +124,29 @@
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal {
+.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal {
   display: flex;
 }
 
-.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal li {
+.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal li {
   display: flex;
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal li:not(:last-child) {
+.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal li:not(:last-child) {
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-0-1-list--inverted,
-.sd-1-0-1-prose--inverted > :is(ol, ul) {
+.sd-1-2-0-list--inverted,
+.sd-1-2-0-prose--inverted > :is(ol, ul) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-0-1-list--inverted li > sd-icon:first-of-type,
-  .sd-1-0-1-list--inverted li > .sd-1-0-1-list--icon__icon:first-of-type,
-  .sd-1-0-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-1-0-1-prose--inverted > :is(ol, ul) li > .sd-1-0-1-list--icon__icon:first-of-type {
+.sd-1-2-0-list--inverted li > sd-icon:first-of-type,
+  .sd-1-2-0-list--inverted li > .sd-1-2-0-list--icon__icon:first-of-type,
+  .sd-1-2-0-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
+  .sd-1-2-0-prose--inverted > :is(ol, ul) li > .sd-1-2-0-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }

package/dist-versioned/modules/mark.css

@@ -1,11 +1,11 @@
 /**
  * The green accent color can be used to highlight parts of the text.
- * @name sd-1-0-1-mark
+ * @name sd-1-2-0-mark
  * @status stable
  * @since 1.7
  */
 
-mark.sd-1-0-1-mark {
+mark.sd-1-2-0-mark {
 
     background-color: transparent;
 

package/dist-versioned/modules/media.css

@@ -1,30 +1,30 @@
 /**
  * Generates basic styles for media elements.
- * @name sd-1-0-1-media
+ * @name sd-1-2-0-media
  * @status stable
  * @since 2.5.0
- * @boolean sd-1-0-1-media--inverted Inverts the figcaption text.
+ * @boolean sd-1-2-0-media--inverted Inverts the figcaption text.
  */
 
-.sd-1-0-1-prose figure,
-figure.sd-1-0-1-media {
+.sd-1-2-0-prose figure,
+figure.sd-1-2-0-media {
 
     margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
 }
 
-.sd-1-0-1-prose figure figcaption, figure.sd-1-0-1-media figcaption {
+.sd-1-2-0-prose figure figcaption, figure.sd-1-2-0-media figcaption {
 
     
 
     color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */
 }
 
-.sd-1-0-1-prose figure figcaption:last-child, figure.sd-1-0-1-media figcaption:last-child {
+.sd-1-2-0-prose figure figcaption:last-child, figure.sd-1-2-0-media figcaption:last-child {
 
     margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */
 }
 
-.sd-1-0-1-prose--inverted figure figcaption, figure.sd-1-0-1-media--inverted figcaption {
+.sd-1-2-0-prose--inverted figure figcaption, figure.sd-1-2-0-media--inverted figcaption {
 
     
 

package/dist-versioned/modules/meta.css

@@ -1,15 +1,15 @@
 /**
  * Meta information like file size, date, or whatever is needed.
- * @name sd-1-0-1-meta
+ * @name sd-1-2-0-meta
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-0-1-meta--size-... The size. Small can be used as an alternative in tight spaces.
- * @boolean sd-1-0-1-meta--inverted Inverts the meta element.
- * @boolean sd-1-0-1-meta--pipe Adds a pipe right from the meta element.
- * @boolean sd-1-0-1-meta--light Makes sd-1-0-1-meta light.
+ * @variant { sm } sd-1-2-0-meta--size-... The size. Small can be used as an alternative in tight spaces.
+ * @boolean sd-1-2-0-meta--inverted Inverts the meta element.
+ * @boolean sd-1-2-0-meta--pipe Adds a pipe right from the meta element.
+ * @boolean sd-1-2-0-meta--light Makes sd-1-2-0-meta light.
  */
 
-.sd-1-0-1-meta {
+.sd-1-2-0-meta {
       font-size: var(--sd-font-size-base, 1rem) /* 16px */;
       font-weight: 400;
       line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
@@ -17,33 +17,33 @@
       color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-0-1-meta--size-sm {
+.sd-1-2-0-meta--size-sm {
       font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
 }
 
-.sd-1-0-1-meta--light {
+.sd-1-2-0-meta--light {
       
       color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-0-1-meta--inverted {
+.sd-1-2-0-meta--inverted {
       
       color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-0-1-meta--inverted.sd-1-0-1-meta--light {
+.sd-1-2-0-meta--inverted.sd-1-2-0-meta--light {
       
       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 */;
 }
 
-.sd-1-0-1-meta--pipe::after {
+.sd-1-2-0-meta--pipe::after {
       content: '|';
       margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
       margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
     }
 
-.sd-1-0-1-meta--pipe.sd-1-0-1-meta--size-sm::after {
+.sd-1-2-0-meta--pipe.sd-1-2-0-meta--size-sm::after {
       margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
       margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }

package/dist-versioned/modules/paragraph.css

@@ -1,28 +1,28 @@
 /**
  * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
- * @name sd-1-0-1-paragraph
+ * @name sd-1-2-0-paragraph
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-0-1-paragraph--size-... The paragraph's font size.
- * @boolean sd-1-0-1-paragraph--inverted Inverts the paragraph text.
+ * @variant { sm } sd-1-2-0-paragraph--size-... The paragraph's font size.
+ * @boolean sd-1-2-0-paragraph--inverted Inverts the paragraph text.
  */
-.sd-1-0-1-paragraph,
-.sd-1-0-1-prose p {
+.sd-1-2-0-paragraph,
+.sd-1-2-0-prose p {
     font-size: var(--sd-font-size-base, 1rem) /* 16px */;
     font-weight: 400;
     line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
     
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
-.sd-1-0-1-paragraph--size-sm, .sd-1-0-1-prose p--size-sm {
+.sd-1-2-0-paragraph--size-sm, .sd-1-2-0-prose p--size-sm {
     font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
     font-weight: 400;
     line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
     
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
-.sd-1-0-1-paragraph--inverted,
-.sd-1-0-1-prose--inverted p {
+.sd-1-2-0-paragraph--inverted,
+.sd-1-2-0-prose--inverted p {
     
     color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
 }