@oardi/css-utils 0.113.0 → 0.115.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.113.0",
+	"version": "0.115.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/file-upload.scss

@@ -0,0 +1,233 @@
+@use '../layers.scss';
+
+@layer components {
+	.file-upload {
+		--file-upload-gap: var(--spacer-2);
+		--file-upload-dropzone-gap: var(--spacer-3);
+		--file-upload-dropzone-padding: var(--spacer-4);
+		--file-upload-dropzone-bg-color: var(--bg-surface);
+		--file-upload-dropzone-border-width: var(--border-width);
+		--file-upload-dropzone-border-color: var(--control-border-color);
+		--file-upload-dropzone-border-radius: var(--border-radius-lg);
+		--file-upload-dropzone-hover-border-color: var(--primary-hover);
+		--file-upload-dropzone-active-bg-color: var(--bg-highlight);
+		--file-upload-dropzone-active-border-color: var(--primary);
+		--file-upload-input-bg-color: var(--bg-body);
+		--file-upload-input-border-color: var(--control-border-color);
+		--file-upload-input-border-radius: var(--border-radius);
+		--file-upload-input-padding: var(--spacer-2);
+		--file-upload-button-bg-color: var(--bg-highlight);
+		--file-upload-button-hover-bg-color: var(--bg-active);
+		--file-upload-button-color: var(--text-color);
+		--file-upload-button-padding-y: var(--spacer-1);
+		--file-upload-button-padding-x: var(--spacer-3);
+		--file-upload-summary-color: var(--text-muted);
+		--file-upload-invalid-color: var(--error);
+		--file-upload-disabled-text-color: var(--disabled-text-color);
+		--file-upload-disabled-bg-color: var(--disabled-bg-color);
+		--file-upload-disabled-border-color: var(--disabled-border-color);
+		--file-upload-focus-border-color: var(--primary-hover);
+		--file-upload-focus-outline-width: var(--focus-outline-width);
+		--file-upload-focus-outline-style: var(--focus-outline-style);
+		--file-upload-focus-outline-color: var(--focus-outline-color);
+		--file-upload-focus-outline-offset: var(--focus-offset);
+		--file-upload-transition-duration: var(--transition-duration);
+		--file-upload-transition-easing: var(--transition-easing);
+
+		display: grid;
+		gap: var(--file-upload-gap);
+		min-inline-size: 0;
+
+		> .form-label {
+			margin-block-end: 0;
+		}
+	}
+
+	.file-upload-hint,
+	.file-upload-summary,
+	.file-upload-feedback {
+		margin: 0;
+	}
+
+	.file-upload-hint,
+	.file-upload-summary {
+		color: var(--file-upload-summary-color);
+		font-size: var(--font-size-sm);
+	}
+
+	.file-upload-summary > p {
+		margin: 0;
+	}
+
+	.file-upload-dropzone {
+		display: grid;
+		gap: var(--file-upload-dropzone-gap);
+		min-inline-size: 0;
+		padding: var(--file-upload-dropzone-padding);
+		background-color: var(--file-upload-dropzone-bg-color);
+		border: var(--file-upload-dropzone-border-width) dashed
+			var(--file-upload-dropzone-border-color);
+		border-radius: var(--file-upload-dropzone-border-radius);
+
+		transition:
+			background-color var(--file-upload-transition-duration)
+				var(--file-upload-transition-easing),
+			border-color var(--file-upload-transition-duration) var(--file-upload-transition-easing),
+			outline-offset var(--file-upload-transition-duration)
+				var(--file-upload-transition-easing);
+
+		&:hover:not(:has(.file-upload-input:disabled)) {
+			border-color: var(--file-upload-dropzone-hover-border-color);
+		}
+
+		&:focus-within,
+		&:has(.file-upload-input.is-focus-visible) {
+			border-color: var(--file-upload-focus-border-color);
+			outline: var(--file-upload-focus-outline-width) var(--file-upload-focus-outline-style)
+				var(--file-upload-focus-outline-color);
+			outline-offset: var(--file-upload-focus-outline-offset);
+		}
+
+		&.is-dragover {
+			background-color: var(--file-upload-dropzone-active-bg-color);
+			border-color: var(--file-upload-dropzone-active-border-color);
+			border-style: solid;
+		}
+	}
+
+	.file-upload-prompt {
+		margin: 0;
+		text-align: center;
+	}
+
+	.file-upload-input {
+		box-sizing: border-box;
+		display: block;
+		inline-size: 100%;
+		min-inline-size: 0;
+		max-inline-size: 100%;
+		margin: 0;
+		padding: var(--file-upload-input-padding);
+		overflow: hidden;
+		color: var(--text-color);
+		background-color: var(--file-upload-input-bg-color);
+		border: var(--file-upload-dropzone-border-width) solid var(--file-upload-input-border-color);
+		border-radius: var(--file-upload-input-border-radius);
+		font: inherit;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		cursor: pointer;
+		outline: 0;
+
+		&::file-selector-button {
+			margin-block: calc(-1 * var(--file-upload-input-padding));
+			margin-inline-start: calc(-1 * var(--file-upload-input-padding));
+			margin-inline-end: var(--file-upload-input-padding);
+			padding: var(--file-upload-button-padding-y) var(--file-upload-button-padding-x);
+			color: var(--file-upload-button-color);
+			background-color: var(--file-upload-button-bg-color);
+			border: 0;
+			border-inline-end: var(--file-upload-dropzone-border-width) solid
+				var(--file-upload-input-border-color);
+			font: inherit;
+			cursor: pointer;
+
+			transition: background-color var(--file-upload-transition-duration)
+				var(--file-upload-transition-easing);
+		}
+
+		&:hover:not(:disabled)::file-selector-button {
+			background-color: var(--file-upload-button-hover-bg-color);
+		}
+
+		&:disabled {
+			color: var(--file-upload-disabled-text-color);
+			background-color: var(--file-upload-disabled-bg-color);
+			border-color: var(--file-upload-disabled-border-color);
+			cursor: not-allowed;
+
+			&::file-selector-button {
+				color: var(--file-upload-disabled-text-color);
+				background-color: var(--file-upload-disabled-bg-color);
+				border-color: var(--file-upload-disabled-border-color);
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.file-upload-list {
+		display: grid;
+		gap: var(--spacer-1);
+		margin: 0;
+		padding-inline-start: var(--spacer-5);
+	}
+
+	.file-upload-file-name {
+		overflow-wrap: anywhere;
+	}
+
+	.file-upload-feedback {
+		font-size: var(--font-size-sm);
+	}
+
+	.file-upload-feedback-error {
+		color: var(--file-upload-invalid-color);
+	}
+
+	.file-upload:has(.file-upload-input:is(.is-invalid, [aria-invalid='true'])) {
+		.file-upload-dropzone {
+			border-color: var(--file-upload-invalid-color);
+
+			&:focus-within,
+			&:has(.file-upload-input.is-focus-visible) {
+				outline-color: var(--file-upload-invalid-color);
+			}
+		}
+
+		.file-upload-input {
+			border-color: var(--file-upload-invalid-color);
+		}
+	}
+
+	.file-upload:has(.file-upload-input:disabled) {
+		.file-upload-dropzone {
+			color: var(--file-upload-disabled-text-color);
+			background-color: var(--file-upload-disabled-bg-color);
+			border-color: var(--file-upload-disabled-border-color);
+			cursor: not-allowed;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.file-upload {
+			--file-upload-transition-duration: 0s;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.file-upload-dropzone,
+		.file-upload-input {
+			border-color: CanvasText;
+		}
+
+		.file-upload-dropzone:is(.is-dragover, :focus-within),
+		.file-upload-dropzone:has(.file-upload-input.is-focus-visible) {
+			border-color: Highlight;
+			outline-color: Highlight;
+		}
+
+		.file-upload:has(.file-upload-input:is(.is-invalid, [aria-invalid='true'])) {
+			.file-upload-dropzone,
+			.file-upload-input {
+				border-color: LinkText;
+			}
+		}
+
+		.file-upload:has(.file-upload-input:disabled) {
+			.file-upload-dropzone,
+			.file-upload-input {
+				border-color: GrayText;
+			}
+		}
+	}
+}

package/scss/components/progress.scss

@@ -0,0 +1,194 @@
+@use '../layers.scss';
+
+@layer components {
+	.progress {
+		--progress-block-size: 0.5rem;
+		--progress-inline-size: 8rem;
+		--progress-track-color: var(--bg-active);
+		--progress-value-color: var(--primary);
+		--progress-border-color: var(--control-border-color);
+		--progress-border-width: var(--border-width);
+		--progress-border-radius: 9999px;
+		--progress-animation-duration: 1.5s;
+		--progress-animation-easing: ease-in-out;
+
+		box-sizing: border-box;
+		display: block;
+		inline-size: 100%;
+		block-size: var(--progress-block-size);
+		overflow: hidden;
+		appearance: none;
+		border: var(--progress-border-width) solid var(--progress-border-color);
+		border-radius: var(--progress-border-radius);
+		background-color: var(--progress-track-color);
+		color: var(--progress-value-color);
+		vertical-align: middle;
+		accent-color: var(--progress-value-color);
+	}
+
+	.progress::-webkit-progress-bar {
+		background-color: var(--progress-track-color);
+		border-radius: inherit;
+	}
+
+	.progress::-webkit-progress-value {
+		background-color: var(--progress-value-color);
+		border-radius: inherit;
+		transition: inline-size var(--progress-animation-duration) var(--progress-animation-easing);
+	}
+
+	.progress::-moz-progress-bar {
+		background-color: var(--progress-value-color);
+		border-radius: inherit;
+		transition: inline-size var(--progress-animation-duration) var(--progress-animation-easing);
+	}
+
+	.progress:indeterminate {
+		background:
+			linear-gradient(
+					to right,
+					transparent 0%,
+					transparent 25%,
+					var(--progress-value-color) 25%,
+					var(--progress-value-color) 75%,
+					transparent 75%,
+					transparent 100%
+				) -100%
+				0 / 50% 100% no-repeat,
+			var(--progress-track-color);
+		animation: progress-indeterminate var(--progress-animation-duration)
+			var(--progress-animation-easing) infinite;
+	}
+
+	.progress:indeterminate::-webkit-progress-bar {
+		background: transparent;
+	}
+
+	.progress:indeterminate::-webkit-progress-value {
+		background: transparent;
+	}
+
+	.progress:indeterminate::-moz-progress-bar {
+		background: transparent;
+	}
+
+	.progress-sm {
+		--progress-block-size: 0.375rem;
+	}
+
+	.progress-md {
+		--progress-block-size: 0.5rem;
+	}
+
+	.progress-lg {
+		--progress-block-size: 0.75rem;
+	}
+
+	.progress-inline {
+		display: inline-block;
+		inline-size: var(--progress-inline-size);
+	}
+
+	.progress-block {
+		display: block;
+		inline-size: 100%;
+	}
+
+	.spinner {
+		--spinner-size: 1rem;
+		--spinner-border-width: 0.125rem;
+		--spinner-track-color: color-mix(in srgb, var(--spinner-color) 25%, transparent);
+		--spinner-color: var(--primary);
+		--spinner-animation-duration: 0.75s;
+		--spinner-animation-easing: linear;
+
+		box-sizing: border-box;
+		display: inline-block;
+		flex: 0 0 auto;
+		inline-size: var(--spinner-size);
+		block-size: var(--spinner-size);
+		border: var(--spinner-border-width) solid var(--spinner-track-color);
+		border-inline-start-color: var(--spinner-color);
+		border-radius: 50%;
+		vertical-align: -0.125em;
+		animation: spinner-rotate var(--spinner-animation-duration) var(--spinner-animation-easing)
+			infinite;
+	}
+
+	.spinner-sm {
+		--spinner-size: 0.75rem;
+		--spinner-border-width: 0.125rem;
+	}
+
+	.spinner-md {
+		--spinner-size: 1rem;
+		--spinner-border-width: 0.125rem;
+	}
+
+	.spinner-lg {
+		--spinner-size: 1.5rem;
+		--spinner-border-width: 0.1875rem;
+	}
+
+	.spinner-inline {
+		display: inline-block;
+	}
+
+	.spinner-block {
+		display: block;
+	}
+
+	@each $color in primary, secondary, success, warning, error {
+		.progress-#{$color} {
+			--progress-value-color: var(--#{$color});
+		}
+
+		.spinner-#{$color} {
+			--spinner-color: var(--#{$color});
+		}
+	}
+
+	@keyframes progress-indeterminate {
+		to {
+			background-position:
+				200% 0,
+				0 0;
+		}
+	}
+
+	@keyframes spinner-rotate {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress:indeterminate {
+			background-position:
+				50% 0,
+				0 0;
+			animation: none;
+		}
+
+		.spinner {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.progress {
+			--progress-track-color: Canvas;
+			--progress-value-color: Highlight;
+			--progress-border-color: CanvasText;
+
+			forced-color-adjust: none;
+		}
+
+		.spinner {
+			--spinner-track-color: GrayText;
+			--spinner-color: Highlight;
+
+			forced-color-adjust: none;
+		}
+	}
+}

package/scss/index.scss

@@ -34,6 +34,7 @@
 @forward './components/drawer.scss';
 @forward './components/empty-state.scss';
 @forward './components/expansion-panel.scss';
+@forward './components/file-upload.scss';
 @forward './components/form.scss';
 @forward './components/icon-button.scss';
 @forward './components/input-group.scss';
@@ -43,6 +44,7 @@
 @forward './components/navbar.scss';
 @forward './components/overlay.scss';
 @forward './components/pagination.scss';
+@forward './components/progress.scss';
 @forward './components/range-slider.scss';
 @forward './components/skeleton.scss';
 @forward './components/stepper.scss';