@oardi/css-utils 0.109.0 → 0.111.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.109.0",
+	"version": "0.111.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/input-group.scss

@@ -0,0 +1,194 @@
+@use '../layers.scss';
+
+@layer components {
+	.input-group {
+		--input-group-bg-color: var(--bg-surface);
+		--input-group-border-width: var(--border-width);
+		--input-group-border-color: var(--control-border-color);
+		--input-group-border-radius: var(--border-radius-lg);
+		--input-group-box-shadow: var(--shadow-sm);
+		--input-group-color: var(--text-color);
+		--input-group-addon-bg-color: var(--bg-highlight);
+		--input-group-addon-color: var(--text-muted);
+		--input-group-inset: var(--spacer-1);
+		--input-group-gap: var(--spacer-1);
+		--input-group-item-border-radius: calc(
+			var(--input-group-border-radius) - var(--input-group-inset)
+		);
+		--input-group-padding-y: var(--spacer-1);
+		--input-group-padding-x: var(--spacer-3);
+		--input-group-font-size: var(--font-size);
+		--input-group-control-min-size: 8rem;
+		--input-group-focus-border-color: var(--primary-hover);
+		--input-group-focus-outline-width: var(--focus-outline-width);
+		--input-group-focus-outline-style: var(--focus-outline-style);
+		--input-group-focus-outline-color: var(--focus-outline-color);
+		--input-group-focus-outline-offset: var(--focus-offset);
+		--input-group-invalid-color: var(--error);
+		--input-group-disabled-text-color: var(--disabled-text-color);
+		--input-group-disabled-bg-color: var(--disabled-bg-color);
+		--input-group-disabled-border-color: var(--disabled-border-color);
+		--input-group-transition-duration: var(--transition-duration);
+		--input-group-transition-easing: var(--transition-easing);
+
+		display: flex;
+		flex-wrap: wrap;
+		align-items: stretch;
+		gap: var(--input-group-gap);
+		max-inline-size: 100%;
+		padding: var(--input-group-inset);
+		color: var(--input-group-color);
+		background-color: var(--input-group-bg-color);
+		border: var(--input-group-border-width) solid var(--input-group-border-color);
+		border-radius: var(--input-group-border-radius);
+		box-shadow: var(--input-group-box-shadow);
+		overflow: clip;
+
+		transition:
+			background-color var(--input-group-transition-duration)
+				var(--input-group-transition-easing),
+			border-color var(--input-group-transition-duration) var(--input-group-transition-easing),
+			box-shadow var(--input-group-transition-duration) var(--input-group-transition-easing),
+			outline-offset var(--input-group-transition-duration)
+				var(--input-group-transition-easing);
+
+		> :where(.form-control, .form-select, .input-group-text, .btn, .icon-btn) {
+			margin: 0;
+			border: 0;
+			border-radius: var(--input-group-item-border-radius);
+		}
+
+		> :where(.form-control, .form-select) {
+			flex: 1 1 var(--input-group-control-min-size);
+			inline-size: 1%;
+			min-inline-size: min(100%, var(--input-group-control-min-size));
+			--form-control-bg-color: transparent;
+			--form-control-padding-y: var(--input-group-padding-y);
+			--form-control-padding-x: var(--input-group-padding-x);
+			--form-control-font-size: var(--input-group-font-size);
+			--form-select-bg-color: transparent;
+			--form-select-padding-y: var(--input-group-padding-y);
+			--form-select-padding-x: var(--input-group-padding-x);
+			--form-select-font-size: var(--input-group-font-size);
+		}
+
+		> :is(.form-control, .form-select):is(:focus, :focus-visible, .is-focus-visible) {
+			outline: 0;
+			outline-offset: 0;
+		}
+
+		> .input-group-text {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			flex: 0 0 auto;
+			min-inline-size: 0;
+			padding: var(--input-group-padding-y) var(--input-group-padding-x);
+			color: var(--input-group-addon-color);
+			background-color: var(--input-group-addon-bg-color);
+			font-size: var(--input-group-font-size);
+			line-height: var(--line-height);
+			white-space: nowrap;
+
+			> svg {
+				inline-size: 1em;
+				block-size: 1em;
+				fill: currentColor;
+			}
+		}
+
+		> :where(.btn, .icon-btn) {
+			flex: 0 0 auto;
+			--button-border-radius: var(--input-group-item-border-radius);
+			--button-padding-y: var(--input-group-padding-y);
+			--button-padding-x: var(--input-group-padding-x);
+			--button-font-size: var(--input-group-font-size);
+			--icon-button-border-radius: var(--input-group-item-border-radius);
+			--icon-button-size: auto;
+			--icon-button-padding: var(--input-group-padding-y);
+		}
+
+		&:focus-within,
+		&:has(> .is-focus-visible) {
+			border-color: var(--input-group-focus-border-color);
+			outline: var(--input-group-focus-outline-width) var(--input-group-focus-outline-style)
+				var(--input-group-focus-outline-color);
+			outline-offset: var(--input-group-focus-outline-offset);
+		}
+
+		&:has(> :is(.form-control, .form-select).is-invalid),
+		&:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
+			border-color: var(--input-group-invalid-color);
+
+			&:focus-within,
+			&:has(> .is-focus-visible) {
+				outline-color: var(--input-group-invalid-color);
+			}
+		}
+
+		&:has(> .form-control:disabled),
+		&:has(> .form-select:disabled) {
+			color: var(--input-group-disabled-text-color);
+			background-color: var(--input-group-disabled-bg-color);
+			border-color: var(--input-group-disabled-border-color);
+			box-shadow: none;
+
+			> .input-group-text {
+				color: var(--input-group-disabled-text-color);
+				background-color: var(--input-group-disabled-bg-color);
+			}
+		}
+	}
+
+	.was-validated .input-group:has(> :is(.form-control, .form-select):invalid) {
+		border-color: var(--input-group-invalid-color);
+
+		&:focus-within {
+			outline-color: var(--input-group-invalid-color);
+		}
+	}
+
+	.input-group:has(> :is(.form-control, .form-select).is-invalid) + .invalid-feedback,
+	.input-group:has(> :is(.form-control, .form-select)[aria-invalid='true']) + .invalid-feedback,
+	.was-validated
+		.input-group:has(> :is(.form-control, .form-select):invalid)
+		+ .invalid-feedback {
+		display: block;
+	}
+
+	.input-group-sm {
+		--input-group-padding-y: var(--spacer-0);
+		--input-group-padding-x: var(--spacer-2);
+		--input-group-font-size: var(--font-size-sm);
+		--input-group-control-min-size: 7rem;
+	}
+
+	.input-group-lg {
+		--input-group-padding-y: var(--spacer-2);
+		--input-group-padding-x: var(--spacer-4);
+		--input-group-font-size: var(--font-size-lg);
+		--input-group-control-min-size: 10rem;
+	}
+
+	@media (forced-colors: active) {
+		.input-group {
+			border-color: CanvasText;
+
+			&:focus-within,
+			&:has(> .is-focus-visible) {
+				border-color: Highlight;
+				outline-color: Highlight;
+			}
+
+			&:has(> :is(.form-control, .form-select).is-invalid),
+			&:has(> :is(.form-control, .form-select)[aria-invalid='true']) {
+				border-color: LinkText;
+			}
+
+			&:has(> .form-control:disabled),
+			&:has(> .form-select:disabled) {
+				border-color: GrayText;
+			}
+		}
+	}
+}

package/scss/index.scss

@@ -36,6 +36,7 @@
 @forward './components/expansion-panel.scss';
 @forward './components/form.scss';
 @forward './components/icon-button.scss';
+@forward './components/input-group.scss';
 @forward './components/list.scss';
 @forward './components/menu.scss';
 @forward './components/modal.scss';

package/scss/theme.scss

@@ -1,159 +1,169 @@
 @use 'sass:map';
 
-$spacer: 1rem;
+$-spacer: 1rem;
 
-$default-theme: (
-	colors: (
-		'primary': (
-			base: #8151dd,
-			hover: #7c4cd9,
-			active: #6f3bd2,
-			on: #ffffff,
-		),
-		'secondary': (
-			base: #526070,
-			hover: #465362,
-			active: #394551,
-			on: #ffffff,
-		),
-		'success': (
-			base: #087f5b,
-			hover: #06704f,
-			active: #055f43,
-			on: #ffffff,
-		),
-		'warning': (
-			base: #b45309,
-			hover: #994407,
-			active: #7c3605,
-			on: #ffffff,
-		),
-		'error': (
-			base: #d13a4b,
-			hover: #bb2f40,
-			active: #a22636,
-			on: #ffffff,
-		),
+$-colors: (
+	'primary': (
+		base: #8151dd,
+		hover: #7c4cd9,
+		active: #6f3bd2,
+		on: #ffffff,
 	),
-	dark-colors: (
-		'primary': (
-			base: #ccb4f7,
-			hover: #d6c1f8,
-			active: #e2d3fb,
-			on: #1a1a1a,
-		),
-		'secondary': (
-			base: #aeb9c7,
-			hover: #c0c9d4,
-			active: #d1d8e0,
-			on: #1a1a1a,
-		),
-		'success': (
-			base: #58d3a1,
-			hover: #72ddb2,
-			active: #8ce6c3,
-			on: #1a1a1a,
-		),
-		'warning': (
-			base: #f4bf4f,
-			hover: #f7cd70,
-			active: #f9da91,
-			on: #000000,
-		),
-		'error': (
-			base: #fa8793,
-			hover: #fba0aa,
-			active: #fcb8bf,
-			on: #1a1a1a,
-		),
+	'secondary': (
+		base: #526070,
+		hover: #465362,
+		active: #394551,
+		on: #ffffff,
 	),
-	grays: (
-		50: hsl(0, 0%, 95%),
-		100: hsl(0, 0%, 90%),
-		150: hsl(0, 0%, 85%),
-		200: hsl(0, 0%, 80%),
-		250: hsl(0, 0%, 75%),
-		300: hsl(0, 0%, 70%),
-		350: hsl(0, 0%, 65%),
-		400: hsl(0, 0%, 60%),
-		450: hsl(0, 0%, 55%),
-		500: hsl(0, 0%, 50%),
-		550: hsl(0, 0%, 45%),
-		600: hsl(0, 0%, 40%),
-		650: hsl(0, 0%, 35%),
-		700: hsl(0, 0%, 30%),
-		750: hsl(0, 0%, 25%),
-		800: hsl(0, 0%, 20%),
-		850: hsl(0, 0%, 15%),
-		900: hsl(0, 0%, 10%),
-		950: hsl(0, 0%, 5%),
+	'success': (
+		base: #087f5b,
+		hover: #06704f,
+		active: #055f43,
+		on: #ffffff,
 	),
-	directions: (
-		t: top,
-		e: inline-end,
-		b: bottom,
-		s: inline-start,
-		// add x for left and right
-		 // add y for top and bottom
+	'warning': (
+		base: #b45309,
+		hover: #994407,
+		active: #7c3605,
+		on: #ffffff,
 	),
-	spacings: (
-		0: 0,
-		1: $spacer * 0.25,
-		2: $spacer * 0.5,
-		3: $spacer,
-		4: $spacer * 1.5,
-		5: $spacer * 3,
-		// add auto
+	'error': (
+		base: #d13a4b,
+		hover: #bb2f40,
+		active: #a22636,
+		on: #ffffff,
 	),
-	positions: (
-		relative,
-		absolute,
-		fixed,
-		static,
-		sticky,
-		inherit,
-		initial,
-		unset,
+);
+
+$-dark-colors: (
+	'primary': (
+		base: #ccb4f7,
+		hover: #d6c1f8,
+		active: #e2d3fb,
+		on: #1a1a1a,
 	),
-	zIndexLevels: (
-		n1: -1,
-		0: 0,
-		1: 1,
-		2: 2,
-		3: 3,
-		header: 1000,
-		tooltip: 1010,
-		overlay: 1040,
-		drawer: 1050,
-		toast: 1060,
+	'secondary': (
+		base: #aeb9c7,
+		hover: #c0c9d4,
+		active: #d1d8e0,
+		on: #1a1a1a,
 	),
-	breakpoints: (
-		sm: 576px,
-		md: 768px,
-		lg: 992px,
-		xl: 1200px,
-		xxl: 1400px,
+	'success': (
+		base: #58d3a1,
+		hover: #72ddb2,
+		active: #8ce6c3,
+		on: #1a1a1a,
 	),
-	lineHeights: (
-		xs: 1,
-		sm: 1.125,
-		md: 1.25,
-		lg: 1.5,
-		xl: 1.75,
-		xxl: 2,
-		xxxl: 2.5,
+	'warning': (
+		base: #f4bf4f,
+		hover: #f7cd70,
+		active: #f9da91,
+		on: #000000,
 	),
-	fontSizes: (
-		xs: 0.75rem,
-		sm: 0.875rem,
-		md: 1rem,
-		lg: 1.125rem,
-		xl: 1.25rem,
-		xxl: 1.5rem,
-		xxxl: 2rem,
+	'error': (
+		base: #fa8793,
+		hover: #fba0aa,
+		active: #fcb8bf,
+		on: #1a1a1a,
 	),
 );
 
+$-grays: (
+	50: hsl(0, 0%, 95%),
+	100: hsl(0, 0%, 90%),
+	150: hsl(0, 0%, 85%),
+	200: hsl(0, 0%, 80%),
+	250: hsl(0, 0%, 75%),
+	300: hsl(0, 0%, 70%),
+	350: hsl(0, 0%, 65%),
+	400: hsl(0, 0%, 60%),
+	450: hsl(0, 0%, 55%),
+	500: hsl(0, 0%, 50%),
+	550: hsl(0, 0%, 45%),
+	600: hsl(0, 0%, 40%),
+	650: hsl(0, 0%, 35%),
+	700: hsl(0, 0%, 30%),
+	750: hsl(0, 0%, 25%),
+	800: hsl(0, 0%, 20%),
+	850: hsl(0, 0%, 15%),
+	900: hsl(0, 0%, 10%),
+	950: hsl(0, 0%, 5%),
+);
+
+$-directions: (
+	t: top,
+	e: inline-end,
+	b: bottom,
+	s: inline-start,
+	// add x for left and right
+	 // add y for top and bottom
+);
+
+$-spacings: (
+	0: 0,
+	1: $-spacer * 0.25,
+	2: $-spacer * 0.5,
+	3: $-spacer,
+	4: $-spacer * 1.5,
+	5: $-spacer * 3, // add auto
+);
+
+$-positions: (relative, absolute, fixed, static, sticky, inherit, initial, unset);
+
+$-z-index-levels: (
+	n1: -1,
+	0: 0,
+	1: 1,
+	2: 2,
+	3: 3,
+	header: 1000,
+	tooltip: 1010,
+	overlay: 1040,
+	drawer: 1050,
+	toast: 1060,
+);
+
+$-breakpoints: (
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px,
+	xxl: 1400px,
+);
+
+$-line-heights: (
+	xs: 1,
+	sm: 1.125,
+	md: 1.25,
+	lg: 1.5,
+	xl: 1.75,
+	xxl: 2,
+	xxxl: 2.5,
+);
+
+$-font-sizes: (
+	xs: 0.75rem,
+	sm: 0.875rem,
+	md: 1rem,
+	lg: 1.125rem,
+	xl: 1.25rem,
+	xxl: 1.5rem,
+	xxxl: 2rem,
+);
+
+$default-theme: (
+	colors: $-colors,
+	dark-colors: $-dark-colors,
+	grays: $-grays,
+	directions: $-directions,
+	spacings: $-spacings,
+	positions: $-positions,
+	zIndexLevels: $-z-index-levels,
+	breakpoints: $-breakpoints,
+	lineHeights: $-line-heights,
+	fontSizes: $-font-sizes,
+);
+
 $theme: () !default; // user overrides via with()
 
 $theme: map.deep-merge($default-theme, $theme);