@abstraks-dev/ui-library 1.0.1

package/dist/styles/avatar.scss

@@ -0,0 +1,285 @@
+/* Avatar Component Styles */
+/* Accessible and high contrast mode compatible */
+
+@use 'variables' as *;
+
+.avatar {
+	position: relative;
+	display: inline-block;
+	border-radius: 50%;
+	overflow: hidden;
+	background-color: $gray-100;
+	border: 2px solid transparent;
+	transition: all 0.2s ease-in-out;
+
+	/* Size variants */
+	&--xs {
+		.avatar__image,
+		.avatar__fallback,
+		.avatar__loading {
+			font-size: 10px;
+		}
+	}
+
+	&--sm {
+		.avatar__image,
+		.avatar__fallback,
+		.avatar__loading {
+			font-size: 12px;
+		}
+	}
+
+	&--md {
+		.avatar__image,
+		.avatar__fallback,
+		.avatar__loading {
+			font-size: 16px;
+		}
+	}
+
+	&--lg {
+		.avatar__image,
+		.avatar__fallback,
+		.avatar__loading {
+			font-size: 20px;
+		}
+	}
+
+	&--xl {
+		.avatar__image,
+		.avatar__fallback,
+		.avatar__loading {
+			font-size: 28px;
+		}
+	}
+
+	/* Clickable state */
+	&--clickable {
+		cursor: pointer;
+		min-height: 44px; /* Touch target size */
+		min-width: 44px; /* Touch target size */
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+			border-color: $color-primary;
+		}
+
+		&:focus {
+			outline: 3px solid $focus-color;
+			outline-offset: 2px;
+		}
+
+		&:active {
+			transform: translateY(0);
+		}
+	}
+
+	/* Hoverable effects */
+	&--hoverable {
+		&:hover .avatar__hover-overlay {
+			opacity: 1;
+		}
+	}
+
+	/* Loading state */
+	&--loading {
+		.avatar__loading {
+			background-color: $gray-200;
+		}
+	}
+
+	/* Image element */
+	&__image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 50%;
+		display: block;
+		transition: opacity 0.2s ease-in-out;
+	}
+
+	/* Fallback content */
+	&__fallback {
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		background-color: $gray-600;
+		color: $color-white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		text-transform: uppercase;
+	}
+
+	&__fallback-text {
+		font-size: 1.2em;
+		line-height: 1;
+	}
+
+	&__fallback-icon {
+		width: 60%;
+		height: 60%;
+		opacity: 0.8;
+	}
+
+	/* Hover overlay */
+	&__hover-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.6);
+		border-radius: 50%;
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&::before {
+			content: '';
+			width: 50%;
+			height: 50%;
+			background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMnM0LjQ4IDEwIDEwIDEwIDEwLTQuNDggMTAtMTBTMTcuNTIgMiAxMiAyem0tMiAxNWwtNS01IDEuNDEtMS40MUwxMCAxNC4xN2w3LjU5LTcuNTlMMTkgOGwtOSA5eiIvPjwvc3ZnPg==');
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: contain;
+		}
+	}
+
+	/* Loading state */
+	&__loading {
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: $gray-200;
+	}
+
+	&__loading-spinner {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		animation: avatar-spin 1s linear infinite;
+		color: $color-primary;
+
+		&__circle {
+			stroke: $gray-300;
+		}
+
+		&__path {
+			fill: $color-primary;
+		}
+	}
+
+	/* Responsive design */
+	@media #{$medium} {
+		/* Enhanced touch targets for tablets */
+		&--clickable {
+			min-height: 48px;
+			min-width: 48px;
+		}
+
+		/* Improved hover effects on larger screens */
+		&--hoverable {
+			&:hover .avatar__hover-overlay {
+				opacity: 0.8;
+			}
+		}
+	}
+
+	@media #{$large} {
+		/* Desktop optimizations */
+		&--clickable {
+			&:hover {
+				transform: translateY(-3px);
+				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+			}
+		}
+
+		/* Enhanced size variants for desktop */
+		&--xl {
+			.avatar__image,
+			.avatar__fallback,
+			.avatar__loading {
+				font-size: 32px;
+			}
+		}
+	}
+
+	@media #{$xlarge} {
+		/* Large screen optimizations */
+		&--xl {
+			.avatar__image,
+			.avatar__fallback,
+			.avatar__loading {
+				font-size: 36px;
+			}
+		}
+
+		/* Enhanced interactive effects */
+		&--clickable {
+			&:hover {
+				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+			}
+		}
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		border-color: currentColor;
+
+		&--clickable:focus {
+			outline-color: currentColor;
+			outline-width: 3px;
+		}
+
+		.avatar__fallback {
+			background-color: currentColor;
+			color: $color-white;
+		}
+	}
+
+	/* Reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+
+		&--clickable:hover {
+			transform: none;
+		}
+
+		&__loading-spinner {
+			animation: none;
+		}
+	}
+}
+
+/* Screen reader only styles */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Spinner animation */
+@keyframes avatar-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/dist/styles/button.scss

@@ -0,0 +1,430 @@
+@use 'variables' as *;
+
+/* BASE STYLES */
+
+[role='button'] {
+	cursor: pointer;
+}
+
+.button {
+	margin-bottom: 0;
+	font-weight: 500;
+	text-align: center;
+	vertical-align: middle;
+	touch-action: manipulation;
+	cursor: pointer;
+	background-image: none;
+	border: 2px solid transparent;
+	white-space: nowrap;
+	font-size: 16px;
+	line-height: 1.42857143;
+	border-radius: $border-radius-md;
+	user-select: none;
+	overflow: visible;
+	text-transform: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	min-height: 44px; /* Touch target size */
+	min-width: 44px; /* Touch target size */
+	padding: 12px 24px;
+	position: relative;
+	transition: all 0.2s ease-in-out;
+	text-decoration: none;
+
+	&:focus,
+	&:active:focus {
+		outline: 3px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+		transform: translateY(-1px);
+	}
+
+	&:active,
+	.active {
+		outline: 0;
+		background-image: none;
+		transform: translateY(0);
+	}
+
+	/* Size variants */
+	&--xs {
+		font-size: 12px;
+		padding: 6px 12px;
+		min-height: 32px;
+		min-width: 32px;
+		border-radius: $border-radius-xs;
+	}
+
+	&--sm {
+		font-size: 14px;
+		padding: 8px 16px;
+		min-height: 36px;
+		min-width: 36px;
+		border-radius: $border-radius-sm;
+	}
+
+	&--md {
+		font-size: 16px;
+		padding: 12px 24px;
+		min-height: 44px;
+		min-width: 44px;
+		border-radius: $border-radius-md;
+	}
+
+	&--lg {
+		font-size: 18px;
+		padding: 16px 32px;
+		min-height: 52px;
+		min-width: 52px;
+		border-radius: $border-radius-lg;
+	}
+
+	&--xl {
+		font-size: 20px;
+		padding: 20px 40px;
+		min-height: 60px;
+		min-width: 60px;
+		border-radius: $border-radius-xl;
+	}
+
+	/* Full width variant */
+	&--full-width {
+		width: 100%;
+	}
+
+	/* Loading state */
+	&--loading {
+		pointer-events: none;
+		position: relative;
+		color: transparent;
+
+		.button__loading-text {
+			color: currentColor;
+		}
+	}
+
+	/* Disabled state */
+	&--disabled,
+	&[disabled] {
+		cursor: not-allowed;
+		opacity: 0.6;
+		pointer-events: none;
+		filter: grayscale(50%);
+		transform: none !important;
+	}
+
+	/* Color variants */
+	&--primary {
+		background-color: $color-primary;
+		border-color: $color-primary;
+		color: $color-white;
+		box-shadow: 0 2px 4px $shadow-primary;
+
+		&:hover:not(.button--disabled) {
+			background-color: $color-primary-hover;
+			border-color: $color-primary-hover;
+			box-shadow: 0 4px 8px $shadow-primary-hover;
+		}
+	}
+
+	&--secondary {
+		background-color: $color-secondary;
+		border-color: $color-secondary;
+		color: $color-white;
+		box-shadow: 0 2px 4px $shadow-secondary;
+
+		&:hover:not(.button--disabled) {
+			background-color: $color-secondary-hover;
+			border-color: $color-secondary-hover;
+			box-shadow: 0 4px 8px $shadow-secondary-hover;
+		}
+	}
+
+	&--success {
+		background-color: $color-success;
+		border-color: $color-success;
+		color: $color-black;
+		box-shadow: 0 2px 4px $shadow-success;
+
+		&:hover:not(.button--disabled) {
+			background-color: $color-success-hover;
+			border-color: $color-success-hover;
+			box-shadow: 0 4px 8px $shadow-success-hover;
+		}
+	}
+
+	&--error {
+		background-color: $color-error;
+		border-color: $color-error;
+		color: $color-white;
+		box-shadow: 0 2px 4px $shadow-error;
+
+		&:hover:not(.button--disabled) {
+			background-color: $color-error-hover;
+			border-color: $color-error-hover;
+			box-shadow: 0 4px 8px $shadow-error-hover;
+		}
+	}
+
+	&--warning {
+		background-color: $color-warning;
+		border-color: $color-warning;
+		color: $color-black;
+		box-shadow: 0 2px 4px $shadow-warning;
+
+		&:hover:not(.button--disabled) {
+			background-color: $color-warning-hover;
+			border-color: $color-warning-hover;
+			box-shadow: 0 4px 8px $shadow-warning-hover;
+		}
+	}
+
+	/* Outline variants */
+	&--outline {
+		background-color: transparent;
+		border-width: 2px;
+
+		&.button--primary {
+			color: $color-primary;
+			border-color: $color-primary;
+
+			&:hover:not(.button--disabled) {
+				background-color: $color-primary;
+				color: $color-white;
+			}
+		}
+
+		&.button--secondary {
+			color: $color-secondary;
+			border-color: $color-secondary;
+
+			&:hover:not(.button--disabled) {
+				background-color: $color-secondary;
+				color: $color-white;
+			}
+		}
+
+		&.button--success {
+			color: $color-success;
+			border-color: $color-success;
+
+			&:hover:not(.button--disabled) {
+				background-color: $color-success;
+				color: $color-black;
+			}
+		}
+
+		&.button--error {
+			color: $color-error;
+			border-color: $color-error;
+
+			&:hover:not(.button--disabled) {
+				background-color: $color-error;
+				color: $color-white;
+			}
+		}
+
+		&.button--warning {
+			color: $color-warning;
+			border-color: $color-warning;
+
+			&:hover:not(.button--disabled) {
+				background-color: $color-warning;
+				color: $color-black;
+			}
+		}
+	}
+
+	/* Icon styling */
+	&__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		&--leading {
+			margin-right: 4px;
+		}
+
+		&--trailing {
+			margin-left: 4px;
+		}
+
+		svg {
+			width: 1em;
+			height: 1em;
+			fill: currentColor;
+		}
+	}
+
+	/* Loading spinner */
+	&__loading-spinner {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		animation: button-spin 1s linear infinite;
+
+		&__circle {
+			opacity: 0.25;
+		}
+
+		&__path {
+			opacity: 0.75;
+		}
+	}
+
+	/* Text content */
+	&__text {
+		display: inline-block;
+	}
+
+	&__loading-text {
+		opacity: 1;
+	}
+
+	/* Responsive design */
+	@media #{$medium} {
+		/* Enhanced touch targets for tablets */
+		&--xs {
+			min-height: 36px;
+			min-width: 36px;
+		}
+		&--sm {
+			min-height: 40px;
+			min-width: 40px;
+		}
+		&--md {
+			min-height: 48px;
+			min-width: 48px;
+		}
+		&--lg {
+			min-height: 56px;
+			min-width: 56px;
+		}
+		&--xl {
+			min-height: 64px;
+			min-width: 64px;
+		}
+
+		/* Enhanced hover effects */
+		&:hover:not(.button--disabled) {
+			transform: translateY(-2px);
+		}
+	}
+
+	@media #{$large} {
+		/* Desktop optimizations */
+		&:hover:not(.button--disabled) {
+			transform: translateY(-3px);
+
+			&.button--primary {
+				box-shadow: 0 6px 12px $shadow-primary-strong;
+			}
+			&.button--secondary {
+				box-shadow: 0 6px 12px $shadow-secondary-strong;
+			}
+			&.button--success {
+				box-shadow: 0 6px 12px $shadow-success-strong;
+			}
+			&.button--error {
+				box-shadow: 0 6px 12px $shadow-error-strong;
+			}
+			&.button--warning {
+				box-shadow: 0 6px 12px $shadow-warning-strong;
+			}
+		}
+
+		/* Larger font sizes for desktop */
+		&--lg {
+			font-size: 20px;
+		}
+		&--xl {
+			font-size: 24px;
+		}
+	}
+
+	@media #{$xlarge} {
+		/* Large screen optimizations */
+		&--xl {
+			font-size: 28px;
+			padding: 24px 48px;
+			min-height: 72px;
+			min-width: 72px;
+		}
+
+		/* Premium shadow effects */
+		&:hover:not(.button--disabled) {
+			&.button--primary {
+				box-shadow: 0 8px 16px $shadow-primary-strongest;
+			}
+			&.button--secondary {
+				box-shadow: 0 8px 16px $shadow-secondary-strongest;
+			}
+			&.button--success {
+				box-shadow: 0 8px 16px $shadow-success-strongest;
+			}
+			&.button--error {
+				box-shadow: 0 8px 16px $shadow-error-strongest;
+			}
+			&.button--warning {
+				box-shadow: 0 8px 16px $shadow-warning-strongest;
+			}
+		}
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		border-width: 3px;
+
+		&:focus {
+			outline-color: $focus-color;
+			outline-width: 4px;
+		}
+
+		&--outline {
+			border-width: 3px;
+		}
+	}
+
+	/* Reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+
+		&:hover {
+			transform: none;
+		}
+
+		.button__loading-spinner {
+			animation: none;
+		}
+	}
+}
+
+/* Screen reader only styles */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Spinner animation */
+@keyframes button-spin {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	100% {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}