Feat: divide & decoration design tokens (#2277)

skeletonlabs · Dec 4, 2023 · ab6f530 · ab6f530
1 parent 30d295e
commit ab6f530
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/packages/plugin/src/tailwind/tokens/borders.ts b/packages/plugin/src/tailwind/tokens/borders.ts
@@ -12,8 +12,12 @@ export const borders = (): CssClasses => {
 		// Color Pairings
 		// Example: .border-primary-50-900-token | .border-primary-900-50-token
 		settings.colorPairings.forEach((p) => {
+			// Standard Border
 			classes[`.border-${n}-${p.light}-${p.dark}-token`] = { 'border-color': `rgb(var(--color-${n}-${p.light}))` };
 			classes[`.dark .border-${n}-${p.light}-${p.dark}-token`] = { 'border-color': `rgb(var(--color-${n}-${p.dark}))` };
+			// Divide Border
+			classes[`.divide-${n}-${p.light}-${p.dark}-token`] = { 'border-color': `rgb(var(--color-${n}-${p.light}))` };
+			classes[`.dark .divide-${n}-${p.light}-${p.dark}-token`] = { 'border-color': `rgb(var(--color-${n}-${p.dark}))` };
 		});
 	});
 	return classes;

diff --git a/packages/plugin/src/tailwind/tokens/text.ts b/packages/plugin/src/tailwind/tokens/text.ts
@@ -24,8 +24,12 @@ export const text = (): CssClasses => {
 		// Color Pairings
 		// Example: .text-primary-50-900-token | .text-primary-900-50-token
 		settings.colorPairings.forEach((p) => {
+			// Text
 			classes[`.text-${n}-${p.light}-${p.dark}-token`] = { color: `rgb(var(--color-${n}-${p.light}))` };
 			classes[`.dark .text-${n}-${p.light}-${p.dark}-token`] = { color: `rgb(var(--color-${n}-${p.dark}))` };
+			// Text Decoration
+			classes[`.decoration-${n}-${p.light}-${p.dark}-token`] = { 'text-decoration-color': `rgb(var(--color-${n}-${p.light}))` };
+			classes[`.dark .decoration-${n}-${p.light}-${p.dark}-token`] = { 'text-decoration-color': `rgb(var(--color-${n}-${p.dark}))` };
 		});
 	});
 	return classes;

diff --git a/packages/skeleton/src/lib/utilities/Drawer/Drawer.svelte b/packages/skeleton/src/lib/utilities/Drawer/Drawer.svelte
@@ -66,7 +66,7 @@
 
 	// Props (transition)
 	/** Set the transition duration in milliseconds. */
-	export let duration: number = 200;
+	export let duration = 200;
 	/**
 	 * Enable/Disable transitions
 	 * @type {boolean}

diff --git a/sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte
@@ -70,6 +70,22 @@
 			['<code class="code">.text-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]
 		]
 	};
+	const tableTDecoration: TableSource = {
+		head: headings,
+		body: [['<code class="code">.decoration-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]]
+	};
+	const tableDivide: TableSource = {
+		head: headings,
+		// body: [['<code class="code">.divide-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings + `\n` + ` <a class='anchor href='https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line' target="_blank">text-decoration-line</a>`]]
+		body: [
+			[
+				'<code class="code">.divide-[color]-[pairings]-token</code>',
+				`${vColorsAll}<br>${vPairings}`,
+				`\nImplements a <a class='anchor' href='https://tailwindcss.com/docs/text-decoration' target="_blank">text-decoration</a> color. ` +
+					descPairings
+			]
+		]
+	};
 	const tableMisc: TableSource = {
 		head: headings,
 		body: [
@@ -149,6 +165,12 @@
 			<h2 class="h2">Borders</h2>
 			<Table source={tableBorder} />
 		</section>
+		<!-- Divides -->
+		<section class="space-y-4">
+			<h2 class="h2">Divide</h2>
+			<p>Utility for controlling the border color between elements.</p>
+			<Table source={tableDivide} />
+		</section>
 		<!-- Fills -->
 		<section class="space-y-4">
 			<h2 class="h2">SVG Fill Color</h2>
@@ -165,6 +187,11 @@
 			<h2 class="h2">Text</h2>
 			<Table source={tableText} />
 		</section>
+		<!--Text Decoration-->
+		<section class="space-y-4">
+			<h2 class="h2">Text Decoration</h2>
+			<Table source={tableTDecoration} />
+		</section>
 		<!-- Accent -->
 		<section class="space-y-4">
 			<h2 class="h2">Accent</h2>