Lean into utility format for Components

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';

packages/skeleton/src/components/badges.css → 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);

packages/skeleton/src/components/buttons.css → 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 {

packages/skeleton/src/components/cards.css → 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 {

packages/skeleton/src/components/chips.css → 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);
 }

packages/skeleton/src/components/dividers.css → 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;

packages/skeleton/src/components/forms-core.css → 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);
 	}

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 {}
+*/

packages/skeleton/src/components/forms-input.css → 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;
 	}

packages/skeleton/src/components/forms-progress.css → 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);
 	}

packages/skeleton/src/components/forms-radio-check.css → 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);
 }

packages/skeleton/src/components/forms-select.css → 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);
 	}