@oardi/css-utils 0.56.0 → 0.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.56.0",
+	"version": "0.58.0",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/components/form.scss

@@ -222,7 +222,7 @@
 				border-color: var(--form-check-input-checked-border-color);
 			}
 
-			&:checked::after {
+			&[type='checkbox']:checked::after {
 				content: '';
 				position: absolute;
 				inset-inline-start: 0.25rem;
@@ -234,6 +234,23 @@
 				transform: rotate(45deg);
 			}
 
+			&[type='radio'] {
+				border-radius: 9999px;
+			}
+
+			&[type='radio']:checked::after {
+				content: '';
+				position: absolute;
+				inset-block-start: 50%;
+				inset-inline-start: 50%;
+				width: 0.5rem;
+				height: 0.5rem;
+				background-color: var(--form-check-input-checked-color);
+				border: 0;
+				border-radius: 9999px;
+				transform: translate(-50%, -50%);
+			}
+
 			&:focus-visible {
 				border-color: var(--primary-hover);
 				outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
@@ -291,3 +308,122 @@
 		color: var(--error);
 	}
 }
+
+@layer components {
+	.form-switch {
+		--form-switch-gap: var(--spacer-2);
+
+		--form-switch-input-width: 2.5rem;
+		--form-switch-input-height: 1.25rem;
+		--form-switch-input-padding: 0.125rem;
+
+		--form-switch-input-bg-color: var(--bg-highlight);
+		--form-switch-input-border-width: var(--border-width);
+		--form-switch-input-border-color: var(--border-color);
+		--form-switch-input-border-radius: 9999px;
+
+		--form-switch-input-checked-bg-color: var(--primary);
+		--form-switch-input-checked-border-color: var(--primary);
+
+		--form-switch-thumb-size: 1rem;
+		--form-switch-thumb-bg-color: var(--bg-surface);
+		--form-switch-thumb-box-shadow: var(--shadow-sm);
+
+		--form-switch-disabled-bg-color: var(--disabled-bg-color);
+		--form-switch-disabled-border-color: var(--disabled-border-color);
+		--form-switch-disabled-thumb-bg-color: var(--disabled-text-color);
+
+		--form-switch-focus-outline-width: var(--focus-outline-width);
+		--form-switch-focus-outline-style: var(--focus-outline-style);
+		--form-switch-focus-outline-color: var(--focus-outline-color);
+		--form-switch-focus-outline-offset: var(--focus-offset);
+
+		--form-switch-transition-duration: var(--transition-duration);
+		--form-switch-transition-easing: var(--transition-easing);
+
+		display: flex;
+		align-items: center;
+		gap: var(--form-switch-gap);
+
+		.form-switch-input {
+			box-sizing: border-box;
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+			width: var(--form-switch-input-width);
+			height: var(--form-switch-input-height);
+			margin: 0;
+			padding: var(--form-switch-input-padding);
+			appearance: none;
+			cursor: pointer;
+			background-color: var(--form-switch-input-bg-color);
+			border: var(--form-switch-input-border-width) solid var(--form-switch-input-border-color);
+			border-radius: var(--form-switch-input-border-radius);
+
+			transition:
+				background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				border-color var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+				box-shadow var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+
+			&::after {
+				content: '';
+				display: block;
+				flex: 0 0 var(--form-switch-thumb-size);
+				width: var(--form-switch-thumb-size);
+				height: var(--form-switch-thumb-size);
+				background-color: var(--form-switch-thumb-bg-color);
+				border-radius: 9999px;
+				box-shadow: var(--form-switch-thumb-box-shadow);
+				transform: translateX(0);
+
+				transition:
+					transform var(--form-switch-transition-duration) var(--form-switch-transition-easing),
+					background-color var(--form-switch-transition-duration) var(--form-switch-transition-easing);
+			}
+
+			&:checked {
+				background-color: var(--form-switch-input-checked-bg-color);
+				border-color: var(--form-switch-input-checked-border-color);
+
+				&::after {
+					transform: translateX(
+						calc(
+							var(--form-switch-input-width) - var(--form-switch-thumb-size) -
+								(var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
+						)
+					);
+				}
+			}
+
+			&:focus-visible {
+				outline: var(--form-switch-focus-outline-width) var(--form-switch-focus-outline-style)
+					var(--form-switch-focus-outline-color);
+				outline-offset: var(--form-switch-focus-outline-offset);
+			}
+
+			&.is-invalid {
+				border-color: var(--error);
+
+				&:focus-visible {
+					outline: var(--focus-outline-error);
+					outline-offset: var(--form-switch-focus-outline-offset);
+				}
+			}
+
+			&:disabled,
+			&[disabled] {
+				cursor: not-allowed;
+				background-color: var(--form-switch-disabled-bg-color);
+				border-color: var(--form-switch-disabled-border-color);
+
+				&::after {
+					background-color: var(--form-switch-disabled-thumb-bg-color);
+				}
+			}
+		}
+
+		.form-label {
+			margin-bottom: 0;
+		}
+	}
+}

package/scss/text.scss

@@ -41,6 +41,14 @@
 		}
 	}
 
+	.text-white {
+		color: var(--white);
+	}
+
+	.text-black {
+		color: var(--black);
+	}
+
 	@each $name, $value in map.get(theme.$theme, grays) {
 		.text-gray-#{$name} {
 			color: var(--gray-#{$name});

package/scss/theme.scss

@@ -34,18 +34,6 @@ $default-theme: (
 			active: #c73232,
 			on: #ffffff,
 		),
-		'white': (
-			base: #ffffff,
-			hover: #f2f2f2,
-			active: #e6e6e6,
-			on: #000000,
-		),
-		'black': (
-			base: #000000,
-			hover: #1a1a1a,
-			active: #333333,
-			on: #ffffff,
-		),
 	),
 	grays: (
 		50: hsl(0, 0%, 95%),

package/scss/utilities.scss

@@ -42,6 +42,16 @@
 		}
 	}
 
+	.bg-white {
+		background-color: var(--white);
+		color: var(--black);
+	}
+
+	.bg-black {
+		background-color: var(--black);
+		color: var(--white);
+	}
+
 	@each $name, $value in map.get(theme.$theme, grays) {
 		.bg-gray-#{$name} {
 			background-color: var(--gray-#{$name});