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

package/dist-versioned/modules/meta.css

@@ -0,0 +1,49 @@
+/**
+ * Meta information like file size, date, or whatever is needed.
+ * @name sd-1-0-0-next-1-meta
+ * @status stable
+ * @since 1.7
+ * @variant { sm } sd-1-0-0-next-1-meta--size-... The size. Small can be used as an alternative in tight spaces.
+ * @boolean sd-1-0-0-next-1-meta--inverted Inverts the meta element.
+ * @boolean sd-1-0-0-next-1-meta--pipe Adds a pipe right from the meta element.
+ * @boolean sd-1-0-0-next-1-meta--light Makes sd-1-0-0-next-1-meta light.
+ */
+
+.sd-1-0-0-next-1-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. */;
+      
+      color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+}
+
+.sd-1-0-0-next-1-meta--size-sm {
+      font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
+}
+
+.sd-1-0-0-next-1-meta--light {
+      
+      color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
+}
+
+.sd-1-0-0-next-1-meta--inverted {
+      
+      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-1-0-0-next-1-meta--inverted.sd-1-0-0-next-1-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-0-next-1-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-0-next-1-meta--pipe.sd-1-0-0-next-1-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

@@ -0,0 +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-0-next-1-paragraph
+ * @status stable
+ * @since 1.7
+ * @variant { sm } sd-1-0-0-next-1-paragraph--size-... The paragraph's font size.
+ * @boolean sd-1-0-0-next-1-paragraph--inverted Inverts the paragraph text.
+ */
+.sd-1-0-0-next-1-paragraph,
+.sd-1-0-0-next-1-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-0-next-1-paragraph--size-sm, .sd-1-0-0-next-1-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-0-next-1-paragraph--inverted,
+.sd-1-0-0-next-1-prose--inverted p {
+    
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+}