Theme edge properties updated, Divider component added

skeletonlabs · Feb 10, 2025 · bfd4661 · bfd4661
1 parent f7edc7f
commit bfd4661
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 22 deletions.
diff --git a/packages/skeleton/src/base/theme.scss b/packages/skeleton/src/base/theme.scss
@@ -46,10 +46,9 @@
 	--radius-container: 0.25rem;
 
 	/* Edges --- */
-	--border-width-default: 1px;
-	--divide-width-default: 1px;
-	--outline-width-default: 1px;
-	--ring-width-default: 1px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
 
 	/* Colors --- */
 	@each $name in constants.$color-names {
@@ -80,6 +79,20 @@
 	--body-background-color: var(--color-surface-50);
 	--body-background-color-dark: var(--color-surface-950);
 
+	/* Color Pairings --- */
+	/* https://github.com/tailwindlabs/tailwindcss/discussions/16292#discussioncomment-12076534 */
+	@each $name in constants.$color-names {
+		@each $pairing in constants.$color-pairings {
+			$light: list.nth($pairing, 1);
+			$dark: list.nth($pairing, 2);
+			--color-#{$name}-#{$light}-#{$dark}: light-dark(var(--color-#{$name}-#{$light}), var(--color-#{$name}-#{$dark}));
+			--color-#{$name}-contrast-#{$light}-#{$dark}: light-dark(
+				var(--color-#{$name}-contrast-#{$light}),
+				var(--color-#{$name}-contrast-#{$dark})
+			);
+		}
+	}
+
 	/* Typography --- */
 	--text-xs: calc(0.75rem * var(--text-scaling));
 	--text-xs--line-height: calc(calc(1 / 0.75) * var(--text-scaling));
@@ -107,18 +120,4 @@
 	--text-8xl--line-height: calc(1 * var(--text-scaling));
 	--text-9xl: calc(8rem * var(--text-scaling));
 	--text-9xl--line-height: calc(1 * var(--text-scaling));
-
-	/* Color Pairings --- */
-	/* https://github.com/tailwindlabs/tailwindcss/discussions/16292#discussioncomment-12076534 */
-	@each $name in constants.$color-names {
-		@each $pairing in constants.$color-pairings {
-			$light: list.nth($pairing, 1);
-			$dark: list.nth($pairing, 2);
-			--color-#{$name}-#{$light}-#{$dark}: light-dark(var(--color-#{$name}-#{$light}), var(--color-#{$name}-#{$dark}));
-			--color-#{$name}-contrast-#{$light}-#{$dark}: light-dark(
-				var(--color-#{$name}-contrast-#{$light}),
-				var(--color-#{$name}-contrast-#{$dark})
-			);
-		}
-	}
 }
diff --git a/packages/skeleton/src/components/dividers.css b/packages/skeleton/src/components/dividers.css
@@ -0,0 +1,21 @@
+/* Components: Dividers */
+
+@layer components {
+	/* Horizontal Rule --- */
+
+	.hr {
+		border-color: var(--color-surface-200-800);
+		border-top-width: 1px;
+		display: block;
+		width: 100%;
+	}
+
+	/* Vertical Rule --- */
+
+	.vr {
+		border-color: var(--color-surface-200-800);
+		border-left-width: 1px;
+		display: inline-block;
+		height: 100%;
+	}
+}
diff --git a/packages/skeleton/src/components/index.css b/packages/skeleton/src/components/index.css
@@ -2,4 +2,5 @@
 @import 'buttons.css';
 @import 'cards.css';
 @import 'chips.css';
+@import 'dividers.css';
 @import 'typography.css';
diff --git a/packages/skeleton/src/themes/cerberus.css b/packages/skeleton/src/themes/cerberus.css
@@ -31,10 +31,9 @@
 	--body-background-color-dark: var(--color-surface-950);
 	--radius-base: 0.25rem;
 	--radius-container: 0.25rem;
-	--border-width-base: 1px;
-	--divide-width-base: 1px;
-	--outline-width-base: 1px;
-	--ring-width-base: 1px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
 	--color-primary-100: rgb(169 206 253);
 	--color-primary-200: rgb(127, 182, 250);
 	--color-primary-300: rgb(85, 159, 248);

diff --git a/playgrounds/skeleton-core/src/layouts/Layout.astro b/playgrounds/skeleton-core/src/layouts/Layout.astro
@@ -44,6 +44,7 @@ import '../styles/global.css';
 						<a class="anchor" href="/components/buttons">Buttons</a>
 						<a class="anchor" href="/components/chips">Chips</a>
 						<a class="anchor" href="/components/cards">Cards</a>
+						<a class="anchor" href="/components/dividers">Dividers</a>
 					</nav>
 				</div>
 			</div>

diff --git a/playgrounds/skeleton-core/src/pages/components/dividers.astro b/playgrounds/skeleton-core/src/pages/components/dividers.astro
@@ -0,0 +1,37 @@
+---
+import Layout from '@layouts/Layout.astro';
+---
+
+<Layout>
+	<div class="space-y-10">
+		<section class="space-y-10">
+			<header><h1 class="h1">Dividers</h1></header>
+		</section>
+		<!-- Horizontal Rule -->
+		<section class="space-y-4">
+			<h2 class="h2">Horizontal Rule</h2>
+			<div class="w-full space-y-4">
+				<p class="text-xs opacity-60">Default</p>
+				<hr class="hr" />
+				<p class="text-xs opacity-60">border-t-2</p>
+				<hr class="hr border-t-2" />
+				<p class="text-xs opacity-60">border-t-4</p>
+				<hr class="hr border-t-4" />
+				<p class="text-xs opacity-60">border-t-8</p>
+				<hr class="hr border-t-8" />
+			</div>
+		</section>
+		<!-- Vertical Rule -->
+		<section class="space-y-4">
+			<h2 class="h2">Vertical Rule</h2>
+			<div class="h-20 flex justify-start items-center gap-4">
+				<p class="text-xs opacity-60">Default &rarr;</p>
+				<span class="vr"></span>
+				<span class="vr border-l-2"></span>
+				<span class="vr border-l-4"></span>
+				<span class="vr border-l-8"></span>
+				<p class="text-xs opacity-60">&larr; border-l-8</p>
+			</div>
+		</section>
+	</div>
+</Layout>