@abstraks-dev/ui-library 1.0.1

package/dist/styles/heading.scss

@@ -0,0 +1,118 @@
+@use 'variables' as *;
+
+/* Base heading styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+	font-family: $font-family-body;
+	font-weight: 600;
+	line-height: $line-height-tight;
+	color: $color-font-body;
+	margin: 0 0 1rem 0;
+
+	/* Ensure headings are accessible in high contrast mode */
+	@media (prefers-contrast: high) {
+		color: currentColor;
+		font-weight: 700;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
+/* Base font sizes */
+.h1 {
+	font-size: $font-size-xl; /* Mobile first approach */
+}
+
+.h2 {
+	font-size: $font-size-lg;
+}
+
+.h3 {
+	font-size: $font-size-base;
+}
+
+.h4 {
+	font-size: $font-size-sm;
+}
+
+.h5 {
+	font-size: $font-size-sm;
+}
+
+.h6 {
+	font-size: $font-size-xs;
+}
+
+/* Responsive typography scaling */
+@media #{$medium} {
+	.h1 {
+		font-size: $heading-two; /* Scale up on tablets */
+	}
+
+	.h2 {
+		font-size: $heading-three;
+	}
+
+	.h3 {
+		font-size: $heading-four;
+	}
+
+	.h4 {
+		font-size: $font-size-base;
+	}
+
+	.h5 {
+		font-size: $font-size-sm;
+	}
+}
+
+@media #{$large} {
+	.h1 {
+		font-size: $heading-one; /* Full size on desktop */
+	}
+
+	.h2 {
+		font-size: $heading-two;
+	}
+
+	.h3 {
+		font-size: $heading-three;
+	}
+
+	.h4 {
+		font-size: $heading-four;
+	}
+
+	.h5 {
+		font-size: $heading-five;
+	}
+
+	.h6 {
+		font-size: $heading-six;
+	}
+}
+
+@media #{$xlarge} {
+	.h1 {
+		font-size: calc(#{$heading-one} * 1.1); /* Slightly larger on XL screens */
+		line-height: 1.1;
+	}
+
+	.h2 {
+		font-size: calc(#{$heading-two} * 1.05);
+		line-height: 1.2;
+	}
+}

package/dist/styles/hero.scss

@@ -0,0 +1,185 @@
+@use 'variables' as *;
+
+html,
+body,
+.root,
+#root {
+	height: 100%;
+}
+
+.sb-show-main.sb-main-padded {
+	padding: 0;
+}
+
+// Hero wrapper - main container
+.hero-wrapper {
+	position: relative;
+	height: 100vh;
+	min-height: 400px;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-attachment: fixed;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+
+	// Responsive height adjustments
+	@media #{$medium} {
+		min-height: 500px;
+		background-attachment: scroll; // Better performance on mobile
+	}
+
+	@media #{$large} {
+		min-height: 600px;
+		background-attachment: fixed;
+	}
+
+	@media #{$xlarge} {
+		min-height: 70vh;
+	}
+
+	// Overlay variants
+	&.hero--overlay-light::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.2);
+		z-index: $z-index-base;
+	}
+
+	&.hero--overlay-medium::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: $z-index-base;
+	}
+
+	&.hero--overlay-dark::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: $z-index-base;
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		&::before {
+			background: rgba(0, 0, 0, 0.8) !important;
+		}
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		background-attachment: scroll !important;
+	}
+}
+
+// Hero content container
+.hero {
+	position: relative;
+	z-index: calc(#{$z-index-base} + 1);
+	width: 100%;
+	max-width: 1200px;
+	padding: 2rem 1rem;
+	text-align: center;
+	color: $color-white;
+
+	@media #{$medium} {
+		padding: 3rem 2rem;
+	}
+
+	@media #{$large} {
+		padding: 4rem 3rem;
+	}
+
+	@media #{$xlarge} {
+		padding: 5rem 4rem;
+	}
+
+	// Typography enhancements
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-bottom: 1rem;
+		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+
+		@media #{$medium} {
+			margin-bottom: 1.5rem;
+		}
+	}
+
+	p {
+		font-size: 1.1rem;
+		line-height: 1.6;
+		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+
+		@media #{$medium} {
+			font-size: 1.25rem;
+			line-height: 1.7;
+		}
+
+		@media #{$large} {
+			font-size: 1.375rem;
+		}
+	}
+
+	// Focus indicators for accessibility
+	&:focus-visible {
+		outline: 3px solid $color-primary;
+		outline-offset: 2px;
+	}
+
+	// High contrast mode adjustments
+	@media (prefers-contrast: high) {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
+		}
+	}
+}
+
+// Overlay element (when using hasOverlay prop)
+.hero__overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: $z-index-base;
+	pointer-events: none;
+}
+
+// Screen reader only content
+.sr-only {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+}

package/dist/styles/htmlElements.scss

@@ -0,0 +1,20 @@
+@use 'variables' as *;
+
+body {
+	font-family: 'Lato', sans-serif;
+	color: $color-font-body;
+
+	// Scroll lock utility class
+	&.scroll-locked {
+		overflow: hidden !important;
+		// Additional styles for scroll lock state
+		position: relative;
+
+		// Handle iOS devices that might need position fixed
+		@media (max-width: 768px) {
+			position: fixed;
+			width: 100%;
+			top: 0;
+		}
+	}
+}

package/dist/styles/image.scss

@@ -0,0 +1,9 @@
+
+.img {
+	display: flex;
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	margin: 0 auto;
+	border: 0;
+}

package/dist/styles/label.scss

@@ -0,0 +1,340 @@
+@use 'variables' as *;
+
+// Label wrapper container
+.label-wrapper {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 1rem;
+}
+
+// Base label styles
+.label {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.25rem;
+	color: $color-font-body;
+	cursor: pointer;
+	transition: color 0.2s ease;
+
+	// Size variants
+	&--small {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+	}
+
+	&--medium {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	&--large {
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+	}
+
+	// Weight variants
+	&--light {
+		font-weight: 300;
+	}
+
+	&--normal {
+		font-weight: 400;
+	}
+
+	&--medium {
+		font-weight: 500;
+	}
+
+	&--bold {
+		font-weight: 600;
+	}
+
+	// State variants
+	&--disabled {
+		color: rgba($color-font-body, 0.5);
+		cursor: not-allowed;
+	}
+
+	&--required {
+		.label__text::after {
+			content: '';
+			margin-left: 0.125rem;
+		}
+	}
+
+	&--error {
+		color: $color-error;
+	}
+
+	&--success {
+		color: $color-success;
+	}
+
+	&--warning {
+		color: $color-warning;
+	}
+
+	// Responsive typography
+	@media #{$medium} {
+		&--small {
+			font-size: 0.875rem;
+			line-height: 1.375rem;
+		}
+
+		&--medium {
+			font-size: 1rem;
+			line-height: 1.625rem;
+		}
+
+		&--large {
+			font-size: 1.25rem;
+			line-height: 2rem;
+		}
+	}
+
+	@media #{$large} {
+		&--small {
+			font-size: 1rem;
+			line-height: 1.5rem;
+		}
+
+		&--medium {
+			font-size: 1.125rem;
+			line-height: 1.75rem;
+		}
+
+		&--large {
+			font-size: 1.375rem;
+			line-height: 2.25rem;
+		}
+	}
+
+	@media #{$xlarge} {
+		gap: 0.375rem;
+
+		&--small {
+			font-size: 1rem;
+			line-height: 1.625rem;
+		}
+
+		&--medium {
+			font-size: 1.25rem;
+			line-height: 2rem;
+		}
+
+		&--large {
+			font-size: 1.5rem;
+			line-height: 2.5rem;
+		}
+	}
+
+	// Focus styles for accessibility
+	&:focus-visible {
+		outline: 2px solid $color-primary;
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		&--error {
+			color: #ff0000;
+			font-weight: 600;
+		}
+
+		&--success {
+			color: #008000;
+			font-weight: 600;
+		}
+
+		&--warning {
+			color: #ff6600;
+			font-weight: 600;
+		}
+
+		&--disabled {
+			color: #808080;
+			text-decoration: line-through;
+		}
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
+// Label text content
+.label__text {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	flex: 1;
+}
+
+// Required indicator
+.label__required {
+	color: $color-error;
+	font-weight: bold;
+	margin-left: 0.25rem;
+
+	// Ensure good contrast in high contrast mode
+	@media (prefers-contrast: high) {
+		color: #ff0000;
+		font-size: 1.1em;
+	}
+}
+
+// Required text indicator
+.label__required-text {
+	color: rgba($color-font-body, 0.7);
+	font-size: 0.875em;
+	font-style: italic;
+	margin-left: 0.5rem;
+
+	@media (prefers-contrast: high) {
+		color: $color-font-body;
+		font-weight: 500;
+	}
+}
+
+// Help text
+.label__help {
+	margin-top: 0.25rem;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: rgba($color-font-body, 0.7);
+
+	@media #{$medium} {
+		font-size: 0.875rem;
+		line-height: 1.375rem;
+	}
+
+	@media #{$large} {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	@media #{$xlarge} {
+		margin-top: 0.375rem;
+	}
+
+	// High contrast adjustments
+	@media (prefers-contrast: high) {
+		color: $color-font-body;
+		font-weight: 400;
+	}
+}
+
+// Validation messages
+.label__message {
+	margin-top: 0.25rem;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-weight: 500;
+	display: flex;
+	align-items: flex-start;
+	gap: 0.25rem;
+
+	&--error {
+		color: $color-error;
+
+		&::before {
+			content: '⚠';
+			flex-shrink: 0;
+			margin-top: 0.125rem;
+		}
+	}
+
+	&--success {
+		color: $color-success;
+
+		&::before {
+			content: '✓';
+			flex-shrink: 0;
+			margin-top: 0.125rem;
+		}
+	}
+
+	&--warning {
+		color: $color-warning;
+
+		&::before {
+			content: '⚠';
+			flex-shrink: 0;
+			margin-top: 0.125rem;
+		}
+	}
+
+	// Responsive typography
+	@media #{$medium} {
+		font-size: 0.875rem;
+		line-height: 1.375rem;
+	}
+
+	@media #{$large} {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	@media #{$xlarge} {
+		margin-top: 0.375rem;
+	}
+
+	// High contrast mode adjustments
+	@media (prefers-contrast: high) {
+		font-weight: 600;
+
+		&--error {
+			color: #ff0000;
+			background: rgba(255, 0, 0, 0.1);
+			padding: 0.25rem;
+			border-radius: 2px;
+		}
+
+		&--success {
+			color: #008000;
+			background: rgba(0, 128, 0, 0.1);
+			padding: 0.25rem;
+			border-radius: 2px;
+		}
+
+		&--warning {
+			color: #ff6600;
+			background: rgba(255, 102, 0, 0.1);
+			padding: 0.25rem;
+			border-radius: 2px;
+		}
+	}
+
+	// Animation for live regions
+	@media (prefers-reduced-motion: no-preference) {
+		animation: fadeIn 0.3s ease-in-out;
+	}
+}
+
+// Fade in animation for validation messages
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-0.25rem);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+// Screen reader only content
+.sr-only {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+}

package/dist/styles/list-item.scss

@@ -0,0 +1,5 @@
+
+.list-item {
+	padding-left: 0;
+	list-style: none;
+}