From 2f62bed96445d0f3f7cb7d84692f5109b3c28364 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Thu, 13 Feb 2025 13:23:26 -0600
Subject: [PATCH] Lean into utility format for Components

---
 .../skeleton/src/components/forms-group.css   | 21 -----
 packages/skeleton/src/components/index.css    | 16 ----
 packages/skeleton/src/index.css               |  4 +-
 .../src/keyframes/{index.scss => index.css}   |  0
 .../src/{components => utilities}/badges.css  |  4 +-
 .../src/{components => utilities}/buttons.css | 10 ++-
 .../src/{components => utilities}/cards.css   |  4 +-
 .../src/{components => utilities}/chips.css   | 30 ++++---
 .../{components => utilities}/dividers.css    |  4 +-
 .../form-core.css}                            |  4 -
 .../skeleton/src/utilities/form-groups.css    | 13 +++
 .../form-inputs.css}                          | 14 ++--
 .../form-progress.css}                        |  2 +
 .../form-radios-checks.css}                   | 15 +++-
 .../form-selects.css}                         |  6 +-
 .../form-textareas.css}                       |  6 +-
 packages/skeleton/src/utilities/index.css     | 17 ++++
 .../placeholders.css                          |  0
 .../src/{components => utilities}/tables.css  |  0
 .../{components => utilities}/typography.css  | 80 +++++++++++--------
 .../src/pages/components/forms.astro          | 42 +++++-----
 21 files changed, 161 insertions(+), 131 deletions(-)
 delete mode 100644 packages/skeleton/src/components/forms-group.css
 delete mode 100644 packages/skeleton/src/components/index.css
 rename packages/skeleton/src/keyframes/{index.scss => index.css} (100%)
 rename packages/skeleton/src/{components => utilities}/badges.css (94%)
 rename packages/skeleton/src/{components => utilities}/buttons.css (94%)
 rename packages/skeleton/src/{components => utilities}/cards.css (95%)
 rename packages/skeleton/src/{components => utilities}/chips.css (96%)
 rename packages/skeleton/src/{components => utilities}/dividers.css (83%)
 rename packages/skeleton/src/{components/forms-core.css => utilities/form-core.css} (91%)
 create mode 100644 packages/skeleton/src/utilities/form-groups.css
 rename packages/skeleton/src/{components/forms-input.css => utilities/form-inputs.css} (96%)
 rename packages/skeleton/src/{components/forms-progress.css => utilities/form-progress.css} (99%)
 rename packages/skeleton/src/{components/forms-radio-check.css => utilities/form-radios-checks.css} (98%)
 rename packages/skeleton/src/{components/forms-select.css => utilities/form-selects.css} (98%)
 rename packages/skeleton/src/{components/forms-textarea.css => utilities/form-textareas.css} (96%)
 rename packages/skeleton/src/{components => utilities}/placeholders.css (100%)
 rename packages/skeleton/src/{components => utilities}/tables.css (100%)
 rename packages/skeleton/src/{components => utilities}/typography.css (94%)

diff --git a/packages/skeleton/src/components/forms-group.css b/packages/skeleton/src/components/forms-group.css
deleted file mode 100644
index ad54b8eb88..0000000000
--- a/packages/skeleton/src/components/forms-group.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* Components: Forms > Input Group */
-
-@layer components {
-	/* .input-group {
-		display: grid;
-		gap: --spacing(2);
-		align-items: stretch;
-		overflow: hidden;
-	}
-
-	.input-group-label {
-		font-size: var(--text-xs);
-		line-height: var(--text-xs--line-height);
-		font-weight: bold;
-		border-radius: var(--radius-base);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding-inline: --spacing(4);
-	} */
-}
diff --git a/packages/skeleton/src/components/index.css b/packages/skeleton/src/components/index.css
deleted file mode 100644
index f58595d13b..0000000000
--- a/packages/skeleton/src/components/index.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@import './badges.css';
-@import './buttons.css';
-@import './cards.css';
-@import './chips.css';
-@import './dividers.css';
-@import './placeholders.css';
-@import './tables.css';
-@import './typography.css';
-
-/* Forms */
-@import './forms-core.css';
-@import './forms-input.css';
-@import './forms-textarea.css';
-@import './forms-select.css';
-@import './forms-radio-check.css';
-@import './forms-progress.css';
diff --git a/packages/skeleton/src/index.css b/packages/skeleton/src/index.css
index 44164ea2c6..d7051e5290 100644
--- a/packages/skeleton/src/index.css
+++ b/packages/skeleton/src/index.css
@@ -1,9 +1,7 @@
 /* Note that the order of import matters. */
 /* Do not change this unless prompted to. */
 
-/* Base Styles */
 @import './base/index.css';
-/* Features */
-@import './components/index.css';
 @import './utilities/index.css';
 @import './variants/index.css';
+@import './keyframes/index.css';
diff --git a/packages/skeleton/src/keyframes/index.scss b/packages/skeleton/src/keyframes/index.css
similarity index 100%
rename from packages/skeleton/src/keyframes/index.scss
rename to packages/skeleton/src/keyframes/index.css
diff --git a/packages/skeleton/src/components/badges.css b/packages/skeleton/src/utilities/badges.css
similarity index 94%
rename from packages/skeleton/src/components/badges.css
rename to packages/skeleton/src/utilities/badges.css
index f680bbb990..a9c73a96f6 100644
--- a/packages/skeleton/src/components/badges.css
+++ b/packages/skeleton/src/utilities/badges.css
@@ -11,7 +11,7 @@
 	gap: --spacing(2);
 	white-space: nowrap;
 
-	/* Sizes --- */
+	/* Base Size --- */
 	font-size: var(--text-xs);
 	line-height: --spacing(6);
 	height: --spacing(6);
@@ -30,6 +30,8 @@
 	gap: --spacing(2);
 	white-space: nowrap;
 	border-radius: 100%;
+
+	/* Base Size --- */
 	font-size: var(--text-xs);
 	line-height: --spacing(6);
 	width: --spacing(6);
diff --git a/packages/skeleton/src/components/buttons.css b/packages/skeleton/src/utilities/buttons.css
similarity index 94%
rename from packages/skeleton/src/components/buttons.css
rename to packages/skeleton/src/utilities/buttons.css
index e216e8cf1d..a428228d12 100644
--- a/packages/skeleton/src/components/buttons.css
+++ b/packages/skeleton/src/utilities/buttons.css
@@ -11,12 +11,13 @@
 	justify-content: center;
 	gap: --spacing(2);
 	white-space: nowrap;
+
 	/* Transitions (all) */
 	transition-property: all;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
 
-	/* Sizes --- */
+	/* Base Size --- */
 	font-size: var(--text-base);
 	line-height: --spacing(9);
 	height: --spacing(9);
@@ -35,10 +36,13 @@
 	justify-content: center;
 	gap: --spacing(2);
 	white-space: nowrap;
+
 	/* Transitions (all) */
 	transition-property: all;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
+
+	/* Base Size --- */
 	font-size: var(--text-base);
 	line-height: --spacing(9);
 	width: --spacing(9);
@@ -54,9 +58,7 @@
 	overflow: hidden;
 }
 
-/* Size Utilities --- */
-/* Enable responsive sizing, for example: */
-/* <button class="btn btn-sm md:btn-base lg:btn-lg"> */
+/* Sizes --- */
 
 /* Button */
 @utility btn-sm {
diff --git a/packages/skeleton/src/components/cards.css b/packages/skeleton/src/utilities/cards.css
similarity index 95%
rename from packages/skeleton/src/components/cards.css
rename to packages/skeleton/src/utilities/cards.css
index 12717764db..c3e8df7c3a 100644
--- a/packages/skeleton/src/components/cards.css
+++ b/packages/skeleton/src/utilities/cards.css
@@ -8,7 +8,7 @@
 		transition-property: all;
 		transition-timing-function: var(--default-transition-timing-function);
 		transition-duration: var(--default-transition-duration);
-		/* Variants */
+
 		@variant hover {
 			filter: brightness(95%);
 			@variant dark {
@@ -23,7 +23,7 @@
 	transition-property: all;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
-	/* Variants */
+
 	@variant hover {
 		filter: brightness(95%);
 		@variant dark {
diff --git a/packages/skeleton/src/components/chips.css b/packages/skeleton/src/utilities/chips.css
similarity index 96%
rename from packages/skeleton/src/components/chips.css
rename to packages/skeleton/src/utilities/chips.css
index 34ef820bcf..78d22abe92 100644
--- a/packages/skeleton/src/components/chips.css
+++ b/packages/skeleton/src/utilities/chips.css
@@ -11,24 +11,25 @@
 	justify-content: center;
 	gap: --spacing(2);
 	white-space: nowrap;
+
 	/* Transitions */
 	transition-property: all;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
-	/* Variants */
-	@variant hover {
-		filter: brightness(105%);
-		@variant dark {
-			filter: brightness(75%);
-		}
-	}
 
-	/* Sizes --- */
+	/* Base Size --- */
 	font-size: var(--text-xs);
 	line-height: --spacing(6);
 	height: --spacing(6);
 	padding-inline: --spacing(3);
 	padding-block: --spacing(2);
+
+	@variant hover {
+		filter: brightness(105%);
+		@variant dark {
+			filter: brightness(75%);
+		}
+	}
 }
 
 @utility chip-icon {
@@ -42,19 +43,22 @@
 	justify-content: center;
 	gap: --spacing(2);
 	white-space: nowrap;
+
+	/* Base Size */
+	font-size: var(--text-xs);
+	line-height: --spacing(6);
+	width: --spacing(6);
+	height: --spacing(6);
+
 	/* Transitions */
 	transition-property: all;
 	transition-timing-function: var(--default-transition-timing-function);
 	transition-duration: var(--default-transition-duration);
-	/* Variants */
+
 	@variant hover {
 		filter: brightness(105%);
 		@variant dark {
 			filter: brightness(75%);
 		}
 	}
-	font-size: var(--text-xs);
-	line-height: --spacing(6);
-	width: --spacing(6);
-	height: --spacing(6);
 }
diff --git a/packages/skeleton/src/components/dividers.css b/packages/skeleton/src/utilities/dividers.css
similarity index 83%
rename from packages/skeleton/src/components/dividers.css
rename to packages/skeleton/src/utilities/dividers.css
index 2b631bf771..50da2afc2d 100644
--- a/packages/skeleton/src/components/dividers.css
+++ b/packages/skeleton/src/utilities/dividers.css
@@ -1,15 +1,15 @@
 /* Components: Dividers */
 
+/* Horizontal Rule */
 @utility hr {
-	/* Horizontal Rule --- */
 	border-color: var(--color-surface-200-800);
 	border-top-width: 1px;
 	display: block;
 	width: 100%;
 }
 
+/* Vertical Rule */
 @utility vr {
-	/* Vertical Rule --- */
 	border-color: var(--color-surface-200-800);
 	border-left-width: 1px;
 	display: inline-block;
diff --git a/packages/skeleton/src/components/forms-core.css b/packages/skeleton/src/utilities/form-core.css
similarity index 91%
rename from packages/skeleton/src/components/forms-core.css
rename to packages/skeleton/src/utilities/form-core.css
index 6b051dc4cf..58b9c9d239 100644
--- a/packages/skeleton/src/components/forms-core.css
+++ b/packages/skeleton/src/utilities/form-core.css
@@ -1,7 +1,6 @@
 /* Components: Forms (Core) */
 
 @utility fieldset {
-	/* Resets --- */
 	display: block;
 	width: 100%;
 }
@@ -14,9 +13,6 @@
 @utility label {
 	display: block;
 	width: 100%;
-
-	/* Labels --- */
-
 	& > * + * {
 		margin-top: --spacing(1);
 	}
diff --git a/packages/skeleton/src/utilities/form-groups.css b/packages/skeleton/src/utilities/form-groups.css
new file mode 100644
index 0000000000..2d052d7ea0
--- /dev/null
+++ b/packages/skeleton/src/utilities/form-groups.css
@@ -0,0 +1,13 @@
+/* Components: Forms > Input Group */
+
+/*
+@utilityinput-group {}
+
+@utilityig-cell {}
+
+@utilityig-input {}
+
+@utilityig-select {}
+
+@utilityig-button {}
+*/
diff --git a/packages/skeleton/src/components/forms-input.css b/packages/skeleton/src/utilities/form-inputs.css
similarity index 96%
rename from packages/skeleton/src/components/forms-input.css
rename to packages/skeleton/src/utilities/form-inputs.css
index b309bf8ca5..3f55aaf071 100644
--- a/packages/skeleton/src/components/forms-input.css
+++ b/packages/skeleton/src/utilities/form-inputs.css
@@ -6,15 +6,16 @@
 	border-width: var(--default-border-width);
 	border-color: var(--color-surface-200-800);
 	background-color: transparent;
-	/* --- */
+
 	font-size: var(--text-base);
 	line-height: --spacing(9);
 	height: --spacing(9);
 	width: 100%;
 	padding: --spacing(2);
-	/* --- */
+
 	outline-color: transparent;
 	--tw-ring-color: transparent;
+
 	@variant active {
 		border-color: var(--color-primary-500);
 	}
@@ -55,7 +56,8 @@
 		border-radius: var(--radius-base);
 		font-weight: var(--font-weight-medium);
 		text-decoration-line: none;
-		/* --- */
+
+		/* Base Size */
 		font-size: var(--text-xs);
 		height: 100%;
 		padding-inline: --spacing(3);
@@ -91,15 +93,17 @@
 	}
 }
 
+/* Ghost Input*/
+/* Used for the <TagsInput> component. */
 @utility input-ghost {
-	/* Ghost Input --- */
 	/* Used for the <TagsInput> component. */
 	padding: 0px;
 	background-color: transparent;
 	border-color: transparent;
-	/* --- */
+
 	outline-color: transparent;
 	--tw-ring-color: transparent;
+
 	@variant active {
 		border-color: transparent !important;
 	}
diff --git a/packages/skeleton/src/components/forms-progress.css b/packages/skeleton/src/utilities/form-progress.css
similarity index 99%
rename from packages/skeleton/src/components/forms-progress.css
rename to packages/skeleton/src/utilities/form-progress.css
index f75015e49d..f75706b35f 100644
--- a/packages/skeleton/src/components/forms-progress.css
+++ b/packages/skeleton/src/utilities/form-progress.css
@@ -9,11 +9,13 @@
 	webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
+
 	border-radius: var(--radius-base);
 	background-color: var(--color-surface-200-800);
 	width: 100%;
 	height: --spacing(2);
 	overflow: hidden;
+
 	&::-webkit-progress-bar {
 		background-color: var(--color-surface-200-800);
 	}
diff --git a/packages/skeleton/src/components/forms-radio-check.css b/packages/skeleton/src/utilities/form-radios-checks.css
similarity index 98%
rename from packages/skeleton/src/components/forms-radio-check.css
rename to packages/skeleton/src/utilities/form-radios-checks.css
index 9583efca1e..48f0a530a9 100644
--- a/packages/skeleton/src/components/forms-radio-check.css
+++ b/packages/skeleton/src/utilities/form-radios-checks.css
@@ -2,11 +2,13 @@
 
 @utility checkbox {
 	--tw-ring-color: var(--color-surface-200-800);
+
 	cursor: pointer;
 	background-color: var(--color-surface-300-700);
 	border-radius: var(--radius-sm);
 	height: --spacing(5);
 	width: --spacing(5);
+
 	@variant focus-within {
 		--tw-ring-color: var(--color-primary-500);
 	}
@@ -19,6 +21,7 @@
 
 	&:checked {
 		background-color: var(--color-primary-500);
+
 		@variant hover {
 			background-color: var(--color-primary-500);
 		}
@@ -30,6 +33,7 @@
 
 	&:indeterminate {
 		background-color: var(--color-primary-500);
+
 		@variant hover {
 			background-color: var(--color-primary-500);
 		}
@@ -42,11 +46,18 @@
 
 @utility radio {
 	--tw-ring-color: var(--color-surface-200-800);
+
 	cursor: pointer;
 	background-color: var(--color-surface-300-700);
 	border-radius: var(--radius-sm);
 	height: --spacing(5);
 	width: --spacing(5);
+
+	/* Base Size --- */
+	border-radius: 100%;
+	height: --spacing(5);
+	width: --spacing(5);
+
 	@variant focus-within {
 		--tw-ring-color: var(--color-primary-500);
 	}
@@ -59,6 +70,7 @@
 
 	&:checked {
 		background-color: var(--color-primary-500);
+
 		@variant hover {
 			background-color: var(--color-primary-500);
 		}
@@ -67,7 +79,4 @@
 			border: 0;
 		}
 	}
-	border-radius: 100%;
-	height: --spacing(5);
-	width: --spacing(5);
 }
diff --git a/packages/skeleton/src/components/forms-select.css b/packages/skeleton/src/utilities/form-selects.css
similarity index 98%
rename from packages/skeleton/src/components/forms-select.css
rename to packages/skeleton/src/utilities/form-selects.css
index 353763a4ab..d6818c17ec 100644
--- a/packages/skeleton/src/components/forms-select.css
+++ b/packages/skeleton/src/utilities/form-selects.css
@@ -13,13 +13,15 @@
 	border-width: var(--default-border-width);
 	border-color: var(--color-surface-200-800);
 	background-color: transparent;
-	/* --- */
+
+	/* Base Size */
 	height: --spacing(9);
 	width: 100%;
 	padding-block: 0px;
-	/* --- */
+
 	outline-color: transparent;
 	--tw-ring-color: transparent;
+
 	@variant active {
 		border-color: var(--color-primary-500);
 	}
diff --git a/packages/skeleton/src/components/forms-textarea.css b/packages/skeleton/src/utilities/form-textareas.css
similarity index 96%
rename from packages/skeleton/src/components/forms-textarea.css
rename to packages/skeleton/src/utilities/form-textareas.css
index 796643f8fd..9786ea0637 100644
--- a/packages/skeleton/src/components/forms-textarea.css
+++ b/packages/skeleton/src/utilities/form-textareas.css
@@ -6,15 +6,17 @@
 	border-width: var(--default-border-width);
 	border-color: var(--color-surface-200-800);
 	background-color: transparent;
-	/* --- */
+
+	/* Base Size --- */
 	font-size: var(--text-base);
 	line-height: --spacing(9);
 	height: auto;
 	width: 100%;
 	padding: --spacing(2);
-	/* --- */
+
 	outline-color: transparent;
 	--tw-ring-color: transparent;
+
 	@variant active {
 		border-color: var(--color-primary-500);
 	}
diff --git a/packages/skeleton/src/utilities/index.css b/packages/skeleton/src/utilities/index.css
index e69de29bb2..83d5660be0 100644
--- a/packages/skeleton/src/utilities/index.css
+++ b/packages/skeleton/src/utilities/index.css
@@ -0,0 +1,17 @@
+@import './badges.css';
+@import './buttons.css';
+@import './cards.css';
+@import './chips.css';
+@import './dividers.css';
+@import './placeholders.css';
+@import './tables.css';
+@import './typography.css';
+
+/* Forms */
+@import './form-core.css';
+@import './form-groups.css';
+@import './form-inputs.css';
+@import './form-progress.css';
+@import './form-radios-checks.css';
+@import './form-selects.css';
+@import './form-textareas.css';
diff --git a/packages/skeleton/src/components/placeholders.css b/packages/skeleton/src/utilities/placeholders.css
similarity index 100%
rename from packages/skeleton/src/components/placeholders.css
rename to packages/skeleton/src/utilities/placeholders.css
diff --git a/packages/skeleton/src/components/tables.css b/packages/skeleton/src/utilities/tables.css
similarity index 100%
rename from packages/skeleton/src/components/tables.css
rename to packages/skeleton/src/utilities/tables.css
diff --git a/packages/skeleton/src/components/typography.css b/packages/skeleton/src/utilities/typography.css
similarity index 94%
rename from packages/skeleton/src/components/typography.css
rename to packages/skeleton/src/utilities/typography.css
index d9f4129bd8..0fa3472c3f 100644
--- a/packages/skeleton/src/components/typography.css
+++ b/packages/skeleton/src/utilities/typography.css
@@ -7,15 +7,18 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-4xl);
 	line-height: var(--text-4xl--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-5xl);
 		line-height: var(--text-5xl--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility h2 {
@@ -24,15 +27,18 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-3xl);
 	line-height: var(--text-3xl--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-4xl);
 		line-height: var(--text-4xl--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility h3 {
@@ -41,15 +47,18 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-2xl);
 	line-height: var(--text-2xl--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-3xl);
 		line-height: var(--text-3xl--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility h4 {
@@ -58,15 +67,18 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-xl);
 	line-height: var(--text-xl--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-2xl);
 		line-height: var(--text-2xl--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility h5 {
@@ -75,15 +87,18 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-lg);
 	line-height: var(--text-lg--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-xl);
 		line-height: var(--text-xl--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility h6 {
@@ -92,19 +107,21 @@
 	font-weight: var(--heading-font-weight);
 	font-style: var(--heading-font-style);
 	letter-spacing: var(--heading-letter-spacing);
-	@variant dark {
-		color: var(--heading-font-color-dark);
-	}
+
 	font-size: var(--text-base);
 	line-height: var(--text-base--line-height);
+
 	@media (width >= var(--breakpoint-md)) {
 		font-size: var(--text-lg);
 		line-height: var(--text-lg--line-height);
 	}
+
+	@variant dark {
+		color: var(--heading-font-color-dark);
+	}
 }
 
 @utility anchor {
-	/* Anchors --- */
 	color: var(--anchor-font-color);
 	font-family: var(--anchor-font-family);
 	font-size: var(--anchor-font-size);
@@ -113,6 +130,7 @@
 	font-style: var(--anchor-font-style);
 	letter-spacing: var(--anchor-letter-spacing);
 	text-decoration: var(--anchor-text-decoration);
+
 	@variant hover {
 		text-decoration: var(--anchor-text-decoration-hover);
 	}
@@ -128,7 +146,6 @@
 }
 
 @utility blockquote {
-	/* Blockquote --- */
 	border-left-width: 3px;
 	border-left-color: var(--color-primary-500);
 	padding-left: --spacing(4);
@@ -136,7 +153,6 @@
 }
 
 @utility kbd {
-	/* Keyboard --- */
 	background-color: var(--color-surface-300-700);
 	border-width: 1px;
 	border-color: var(--color-surface-600-400);
@@ -151,7 +167,6 @@
 }
 
 @utility pre {
-	/* Preformated / Code --- */
 	background-color: rgba(0, 0, 0, 0.85);
 	backdrop-filter: blur(var(--blur-sm));
 	border-radius: var(--radius-container);
@@ -163,7 +178,7 @@
 }
 
 @utility code {
-	:not(pre, .ec-line) > & {
+	&:not(pre, .ec-line) > & {
 		background-color: var(--color-primary-100-900);
 		border-radius: var(--radius-base);
 		color: var(--color-primary-contrast-50-950);
@@ -176,10 +191,14 @@
 	}
 }
 
+/* Insertions / Deletions --- */
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
+
 @utility ins {
-	/* Insertions / Deletions --- */
-	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
-	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
+	background-color: var(--color-success-500);
+	color: var(--color-success-contrast-500);
+	font-family: var(--font-mono);
 	position: relative;
 	display: block;
 	padding: --spacing(0.5);
@@ -194,12 +213,12 @@
 	&::before {
 		content: '+';
 	}
-	background-color: var(--color-success-500);
-	color: var(--color-success-contrast-500);
-	font-family: var(--font-mono);
 }
 
 @utility del {
+	background-color: var(--color-error-500);
+	color: var(--color-error-contrast-500);
+	font-family: var(--font-mono);
 	position: relative;
 	display: block;
 	padding: --spacing(0.5);
@@ -214,7 +233,4 @@
 	&::before {
 		content: '−';
 	}
-	background-color: var(--color-error-500);
-	color: var(--color-error-contrast-500);
-	font-family: var(--font-mono);
 }
diff --git a/playgrounds/skeleton-core/src/pages/components/forms.astro b/playgrounds/skeleton-core/src/pages/components/forms.astro
index ffddae2e4b..3792ff9556 100644
--- a/playgrounds/skeleton-core/src/pages/components/forms.astro
+++ b/playgrounds/skeleton-core/src/pages/components/forms.astro
@@ -203,36 +203,36 @@ import Layout from '@layouts/Layout.astro';
 			</form>
 		</section>
 		<!-- Groups -->
-		<!-- <section class="space-y-4">
+		<section class="space-y-4">
 			<h2 class="h2">Groups</h2>
-			<form class="mx-auto w-full space-y-8">
-				// Website
-				<div class="input-group grid-cols-[auto_1fr]">
-					<div class="input-group-label">https://</div>
-					<input class="input" type="text" placeholder="www.example.com" />
+			<form class="w-full max-w-md space-y-8">
+				<!-- Website -->
+				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
+					<div class="ig-cell preset-tonal-surface">https://</div>
+					<input class="ig-input" type="text" placeholder="www.example.com" />
 				</div>
-				// Amount
-				<div class="input-group grid-cols-[auto_1fr_auto]">
-					<div class="input-group-label">$</div>
-					<input class="input" type="text" placeholder="Amount" />
-					<select class="select">
+				<!-- Amount -->
+				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
+					<div class="ig-cell preset-tonal-surface">$</div>
+					<input class="ig-input" type="text" placeholder="Amount" />
+					<select class="ig-select">
 						<option>USD</option>
 						<option>CAD</option>
 						<option>EUR</option>
 					</select>
 				</div>
-				// Username
-				<div class="input-group grid-cols-[1fr_auto]">
-					<input class="input" type="text" placeholder="Enter Username..." />
-					<button class="btn-icon preset-filled" title="Username already in use.">&check;</button>
+				<!-- Username -->
+				<div class="input-group divide-surface-200-800 grid-cols-[1fr_auto] divide-x">
+					<input type="text" placeholder="Enter Username..." />
+					<button class="ig-btn preset-filled" title="Username already in use.">&check;</button>
 				</div>
-				// Search
-				<div class="input-group grid-cols-[auto_1fr_auto]">
-					<div class="input-group-label">🔍</div>
-					<input class="input" type="search" placeholder="Search..." />
-					<button class="btn preset-filled">Submit</button>
+				<!-- Search -->
+				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
+					<div class="input-group-cell">🔍</div>
+					<input class="ig-input" type="search" placeholder="Search..." />
+					<button class="ig-btn preset-filled">Submit</button>
 				</div>
 			</form>
-		</section> -->
+		</section>
 	</div>
 </Layout>