@abstraks-dev/ui-library 1.0.1

package/dist/styles/form.scss

@@ -0,0 +1,420 @@
+/* ==========================================================================
+   Form Component Styles
+   ========================================================================== */
+
+@use 'variables' as *;
+
+/* Base Form Styles
+   ========================================================================== */
+
+.form {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	border: none;
+	font-family: $font-family-body;
+	font-size: $font-size-base;
+	line-height: $line-height-base;
+	color: $text-color;
+}
+
+/* Form States
+   ========================================================================== */
+
+.form--disabled {
+	opacity: 0.6;
+	pointer-events: none;
+	cursor: not-allowed;
+}
+
+.form--submitting {
+	position: relative;
+	pointer-events: none;
+}
+
+.form--submitting::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(255, 255, 255, 0.8);
+	z-index: $z-index-base;
+	cursor: wait;
+}
+
+.form--has-errors {
+	border-color: $error-border;
+}
+
+/* Form Layout Utilities
+   ========================================================================== */
+
+.form__fieldset {
+	border: 1px solid $border-color;
+	border-radius: $border-radius;
+	padding: $spacing-lg;
+	margin: 0 0 $spacing-lg 0;
+	min-width: 0;
+	background: $background-color;
+}
+
+.form__legend {
+	font-weight: $font-weight-semibold;
+	font-size: $font-size-lg;
+	color: $text-color;
+	padding: 0 $spacing-sm;
+	margin-bottom: $spacing-md;
+}
+
+.form__field-group {
+	margin-bottom: $spacing-lg;
+}
+
+.form__field-group:last-child {
+	margin-bottom: 0;
+}
+
+.form__field-row {
+	display: flex;
+	gap: $spacing-md;
+	align-items: flex-start;
+	flex-wrap: wrap;
+}
+
+.form__field-row > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Form Actions
+   ========================================================================== */
+
+.form__actions {
+	display: flex;
+	gap: $spacing-md;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	margin-top: $spacing-xl;
+	padding-top: $spacing-lg;
+	border-top: 1px solid $border-color;
+}
+
+.form__actions--left {
+	justify-content: flex-start;
+}
+
+.form__actions--center {
+	justify-content: center;
+}
+
+.form__actions--spread {
+	justify-content: space-between;
+}
+
+/* Error Summary Styles
+   ========================================================================== */
+
+.form__errors-summary {
+	background: $error-background;
+	border: 1px solid $error-border;
+	border-radius: $border-radius;
+	padding: $spacing-md $spacing-lg;
+	margin-bottom: $spacing-lg;
+	color: $error-text;
+}
+
+.form__errors-title {
+	font-weight: $font-weight-semibold;
+	font-size: $font-size-sm;
+	margin: 0 0 $spacing-sm 0;
+	color: $error-text;
+}
+
+.form__errors-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.form__error-item {
+	font-size: $font-size-sm;
+	line-height: $line-height-tight;
+	margin-bottom: $spacing-xs;
+	color: $error-text;
+}
+
+.form__error-item:last-child {
+	margin-bottom: 0;
+}
+
+.form__error-item strong {
+	font-weight: $font-weight-semibold;
+}
+
+/* Loading States
+   ========================================================================== */
+
+.form__loading-indicator {
+	display: flex;
+	align-items: center;
+	gap: $spacing-sm;
+	font-size: $font-size-sm;
+	color: $text-muted;
+	margin-top: $spacing-md;
+}
+
+.form__loading-spinner {
+	width: 16px;
+	height: 16px;
+	border: 2px solid $border-color;
+	border-top: 2px solid $primary-color;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+/* 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;
+}
+
+/* Responsive Design
+   ========================================================================== */
+
+@media (max-width: 768px) {
+	.form__field-row {
+		flex-direction: column;
+		gap: $spacing-md;
+	}
+
+	.form__field-row > * {
+		flex: none;
+	}
+
+	.form__actions {
+		flex-direction: column;
+		align-items: stretch;
+		gap: $spacing-sm;
+	}
+
+	.form__actions--spread {
+		justify-content: stretch;
+	}
+
+	.form__fieldset {
+		padding: $spacing-md;
+	}
+}
+
+@media (max-width: 480px) {
+	.form__fieldset {
+		padding: $spacing-sm;
+		margin-bottom: $spacing-md;
+	}
+
+	.form__legend {
+		font-size: $font-size-base;
+		padding: 0 $spacing-xs;
+	}
+
+	.form__errors-summary {
+		padding: $spacing-sm $spacing-md;
+	}
+}
+
+/* High Contrast Mode Support
+   ========================================================================== */
+
+@media (prefers-contrast: high) {
+	.form__fieldset {
+		border-width: 2px;
+		border-color: $text-color;
+	}
+
+	.form__errors-summary {
+		border-width: 2px;
+		border-color: $error-text;
+		background: $background-color;
+	}
+
+	.form--submitting::before {
+		background: $background-color;
+		opacity: 0.9;
+	}
+}
+
+/* Reduced Motion Support
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+	.form__loading-spinner {
+		animation: none;
+	}
+
+	.form--submitting::before {
+		transition: none;
+	}
+
+	// Scope animation overrides to form elements only for better performance
+	.form input,
+	.form textarea,
+	.form select,
+	.form button,
+	.form input::before,
+	.form input::after,
+	.form textarea::before,
+	.form textarea::after,
+	.form select::before,
+	.form select::after,
+	.form button::before,
+	.form button::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* Focus Management
+   ========================================================================== */
+
+/* Print Styles
+   ========================================================================== */
+
+@media print {
+	.form--submitting::before {
+		display: none;
+	}
+
+	.form__loading-indicator,
+	.form__loading-spinner {
+		display: none;
+	}
+
+	.form__actions {
+		display: none;
+	}
+
+	.form__errors-summary {
+		border: 2px solid #000;
+		background: #fff;
+		color: #000;
+	}
+}
+
+/* Theme Variations
+   ========================================================================== */
+
+.form--inline .form__field-group {
+	display: inline-flex;
+	align-items: center;
+	gap: $spacing-sm;
+	margin-right: $spacing-md;
+	margin-bottom: $spacing-sm;
+}
+
+.form--compact .form__field-group {
+	margin-bottom: $spacing-md;
+}
+
+.form--compact .form__fieldset {
+	padding: $spacing-md;
+}
+
+.form--compact .form__actions {
+	margin-top: $spacing-lg;
+	padding-top: $spacing-md;
+}
+
+/* Dark Theme Support
+   ========================================================================== */
+
+@media (prefers-color-scheme: dark) {
+	.form--submitting::before {
+		background: rgba(0, 0, 0, 0.8);
+	}
+}
+
+/* Interactive States
+   ========================================================================== */
+
+.form__fieldset:hover:not(.form--disabled) {
+	border-color: $border-color-hover;
+}
+
+.form__fieldset:focus-within {
+	border-color: $focus-ring-color;
+	box-shadow: 0 0 0 1px $focus-ring-color;
+	outline: none;
+}
+
+/* Validation States
+   ========================================================================== */
+
+.form--has-errors .form__fieldset {
+	border-color: $error-border;
+}
+
+.form--valid .form__fieldset {
+	border-color: $success-border;
+}
+
+/* Form Layout Modifiers
+   ========================================================================== */
+
+.form--horizontal .form__field-group {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	gap: $spacing-md;
+	align-items: start;
+}
+
+.form--stacked .form__field-group {
+	display: flex;
+	flex-direction: column;
+	gap: $spacing-xs;
+}
+
+/* Utility Classes
+   ========================================================================== */
+
+.form__help-text {
+	font-size: $font-size-sm;
+	color: $text-muted;
+	margin-top: $spacing-xs;
+	line-height: $line-height-tight;
+}
+
+.form__required-indicator {
+	color: $error-text;
+	font-weight: $font-weight-bold;
+}
+
+.form__optional-indicator {
+	color: $text-muted;
+	font-size: $font-size-sm;
+	font-style: italic;
+}

package/dist/styles/grid.scss

@@ -0,0 +1,29 @@
+
+.container {
+    margin-right: auto;
+    margin-left: auto;
+}
+
+*,
+:after,
+:before {
+    box-sizing: border-box
+}
+
+@media (min-width: 768px) {
+    .container {
+        width: 750px
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        width: 970px
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        width: 1170px
+    }
+}

package/dist/styles/header.scss

@@ -0,0 +1,276 @@
+@use 'variables' as *;
+
+.header {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	padding: 15px;
+	background-color: $color-white;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+	// Improve focus indicators for accessibility
+	*:focus {
+		outline: 2px solid $focus-color;
+		outline-offset: 2px;
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+		border-bottom: 1px solid $color-black;
+	}
+
+	.container-large {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.navigation {
+			margin-left: auto;
+		}
+	}
+
+	.container-mobile {
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		.side-menu {
+			width: 50%;
+			display: inline-flex;
+			justify-content: flex-end;
+
+			.overlay {
+				background-color: $color-white;
+			}
+
+			.menu {
+				.wrapper-content {
+					display: flex;
+					flex-direction: column;
+					width: 100%;
+					background-color: $color-white;
+
+					.menu-item {
+						margin: 15px 0;
+					}
+				}
+
+				.wrapper-header {
+					background-color: $color-white;
+				}
+			}
+		}
+	}
+
+	// Mobile menu trigger button styling
+	.mobile-menu-trigger,
+	.mobile-menu-close {
+		background: none;
+		border: none;
+		padding: 8px;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+
+		&:focus {
+			outline: 2px solid $focus-color;
+			outline-offset: 2px;
+		}
+	}
+
+	.navigation {
+		@media #{$medium} {
+			display: inline-flex;
+			justify-content: flex-end;
+		}
+
+		.unordered-list {
+			display: flex;
+			flex-direction: column;
+
+			@media #{$medium} {
+				display: inline-flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-end;
+				padding: 0;
+				margin: 0;
+			}
+
+			&.auth-menu {
+				border-top: 1px solid $gray-200;
+
+				@media #{$medium} {
+					border-left: 1px solid $gray-200;
+					border-top: none;
+				}
+
+				.head {
+					.ellipses {
+						background: none;
+						border: none;
+						padding: 4px;
+						cursor: pointer;
+						border-radius: 50%;
+						position: relative;
+						transition: background-color 0.2s ease;
+
+						&:hover {
+							background-color: rgba(0, 0, 0, 0.05);
+						}
+
+						&:focus {
+							outline: 2px solid $focus-color;
+							outline-offset: 2px;
+						}
+
+						&[aria-expanded='true'] {
+							background-color: rgba(0, 0, 0, 0.1);
+						}
+
+						.ellipses-content {
+							display: flex;
+							z-index: $z-index-dropdown;
+							position: absolute;
+							width: 200px;
+							right: 0;
+							top: 100%;
+							margin-top: 8px;
+							border-radius: 8px;
+							box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+								rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+								rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+							background-color: $color-white;
+							border: 1px solid rgba(0, 0, 0, 0.1);
+							padding: 8px 0;
+							opacity: 1;
+							transform: none;
+							transition: opacity 226ms cubic-bezier(0.4, 0, 0.2, 1),
+								transform 151ms cubic-bezier(0.4, 0, 0.2, 1);
+
+							// High contrast mode
+							@media (prefers-contrast: high) {
+								border: 2px solid $color-black;
+								box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+							}
+
+							.unordered-list {
+								align-items: flex-start;
+								flex-direction: column;
+								width: 100%;
+
+								.list-item {
+									width: 100%;
+									padding: 0;
+
+									[role='menuitem'] {
+										display: block;
+										padding: 12px 16px;
+										width: 100%;
+										color: $color-font-body;
+										text-decoration: none;
+										transition: background-color 0.2s ease;
+
+										&:hover,
+										&:focus {
+											background-color: rgba(0, 0, 0, 0.05);
+											color: $color-primary;
+										}
+
+										&:focus {
+											outline: 2px solid $focus-color;
+											outline-offset: -2px;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.list-item {
+				display: flex;
+
+				@media #{$medium} {
+					display: inline-flex;
+					padding: 0 15px;
+				}
+
+				// Menu item styling
+				[role='menuitem'] {
+					display: inline-block;
+					padding: 8px 12px;
+					border-radius: 4px;
+					transition: background-color 0.2s ease, color 0.2s ease;
+
+					&:focus {
+						outline: 2px solid $focus-color;
+						outline-offset: 2px;
+					}
+				}
+			}
+		}
+
+		.anchor {
+			color: $gray-600;
+			text-decoration: none;
+			transition: color 0.2s ease;
+
+			&:hover {
+				color: $color-font-body;
+			}
+
+			&:focus {
+				color: $color-primary;
+				outline: 2px solid $focus-color;
+				outline-offset: 2px;
+			}
+
+			// High contrast mode
+			@media (prefers-contrast: high) {
+				&:hover,
+				&:focus {
+					color: $color-black;
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+
+	// Responsive breakpoint adjustments
+	@media #{$large} {
+		padding: 20px;
+
+		.container-large {
+			max-width: 1200px;
+			margin: 0 auto;
+		}
+	}
+
+	@media #{$xlarge} {
+		padding: 24px;
+
+		.container-large {
+			max-width: 1400px;
+		}
+	}
+
+	// Reduce motion for accessibility
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+		}
+	}
+}