feat: mark utility (#3408)

Author: Hugos68

.changeset/yellow-turkeys-divide.md

@@ -0,0 +1,6 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: `mark` utility
+  

packages/skeleton/src/utilities/typography.css

@@ -228,3 +228,10 @@
 		content: '−';
 	}
 }
+
+@utility mark {
+	color: var(--color-tertiary-contrast-500);
+	background-color: var(--color-tertiary-500);
+	border-radius: var(--radius-sm);
+	padding-inline: --spacing(1);
+}

playgrounds/skeleton-core/src/pages/design/typography.astro

@@ -82,5 +82,14 @@ import Layout from '@layouts/Layout.astro';
 				<ins class="ins" cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022"> Never Gonna Give You Up </ins>
 			</div>
 		</section>
+
+		<section class="space-y-4">
+			<h2 class="h2">Mark</h2>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur <mark class="mark">adipisicing</mark> elit. Maxime labore repellendus exercitationem. Suscipit
+				molestiae esse cumque dolore non <mark class="mark">ducimus</mark> temporibus dolorum voluptatum <mark class="mark">fugiat</mark>,
+				quas recusandae aliquid amet molestias excepturi nemo?
+			</p>
+		</section>
 	</div>
 </Layout>

sites/skeleton.dev/src/content/docs/design/typography.mdx

@@ -27,6 +27,8 @@ import Keyboard from '@examples/design/typography/Keyboard.astro';
 import KeyboardRaw from '@examples/design/typography/Keyboard.astro?raw';
 import InsDel from '@examples/design/typography/InsDel.astro';
 import InsDelRaw from '@examples/design/typography/InsDel.astro?raw';
+import Mark from '@examples/design/typography/Mark.astro';
+import MarkRaw from '@examples/design/typography/Mark.astro?raw';
 
 import Semantic from '@examples/design/typography/Semantic.svelte';
 import SemanticRaw from '@examples/design/typography/Semantic.svelte?raw';
@@ -179,6 +181,16 @@ Use the following utility classes to quickly style semantic HTML elements. These
 	</Fragment>
 </Preview>
 
+### Mark
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Mark />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={MarkRaw} lang="astro" />
+	</Fragment>
+</Preview>
 ## Lists
 
 Skeleton defers to Tailwind's built-in utility classes for common list styles.

sites/skeleton.dev/src/examples/design/typography/Mark.astro

@@ -0,0 +1,7 @@
+<p>
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum <mark
+		class="mark">voluptatibus</mark
+	>
+	natus dignissimos, quidem est unde aspernatur veniam pariatur fuga distinctio esse in quas, <mark class="mark">repellendus</mark>
+	neque reiciendis!
+</p>