jules/ui-essentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2a28a8abbd528b01bf027a949efc32017548d2d6
ui-essentials/projects/ui-landing-pages/src/lib/components/social-proof/statistics-display.component.scss
Jules 2a28a8abbd Complete library submodule standardization and consumer integration 
🎯 Major Achievements:
- Standardized 193+ SCSS imports across all libraries
- Created 12 independent Git repositories with clean submodule structure
- Eliminated relative path dependencies for true library portability
- Added comprehensive consumer integration documentation

📦 Libraries Successfully Published:
• ui-design-system (foundation)
• ui-essentials (components)
• shared-utils (utilities)
• auth-client (authentication)
• ui-landing-pages (marketing components)
• ui-code-display (syntax highlighting)
• ui-accessibility (WCAG compliance)
• hcl-studio (color management)
• ui-animations (CSS animations)
• ui-backgrounds (background effects)
• ui-font-manager (typography)
• ui-data-utils (data manipulation)

🔧 Technical Improvements:
- All SCSS imports now use standardized 'ui-design-system/' paths
- Libraries work independently as Git submodules
- Consumer projects can selectively include only needed libraries
- Professional Git history with initial commits for each library
- Updated integration guides with step-by-step workflows

📋 Documentation Added:
- CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions
- Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info
- Library-specific README files for all repositories

🚀 Ready for Production:
- All libraries pushed to https://git.sky-ai.com/jules/*
- Clean separation of concerns across library boundaries
- Independent versioning and release cycles possible
- Optimal structure for LLM analysis and maintenance

This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption.

🤖 Generated with Claude Code (https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-12 14:42:01 +10:00

331 lines
8.8 KiB
SCSS
Raw Blame History

@use 'ui-design-system/src/styles/semantic/index' as *;
.ui-lp-statistics-display {
padding: $semantic-spacing-layout-section-lg 0;
// Background Variants
&--transparent {
background: transparent;
}
&--surface {
background: $semantic-color-surface-elevated;
}
&--primary {
background: $semantic-color-primary;
color: $semantic-color-on-primary;
.ui-lp-statistics-display__title,
.ui-lp-statistics-display__value,
.ui-lp-statistics-display__label {
color: $semantic-color-on-primary;
}
.ui-lp-statistics-display__subtitle,
.ui-lp-statistics-display__description {
color: $semantic-color-on-primary;
opacity: $semantic-opacity-subtle;
}
}
// Header Section
&__header {
text-align: center;
margin-bottom: $semantic-spacing-layout-section-md;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
&__title {
font-family: map-get($semantic-typography-heading-h2, font-family);
font-size: map-get($semantic-typography-heading-h2, font-size);
font-weight: map-get($semantic-typography-heading-h2, font-weight);
line-height: map-get($semantic-typography-heading-h2, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-heading;
}
&__subtitle {
font-family: map-get($semantic-typography-body-large, font-family);
font-size: map-get($semantic-typography-body-large, font-size);
font-weight: map-get($semantic-typography-body-large, font-weight);
line-height: map-get($semantic-typography-body-large, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
// Items Container
&__items {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
// Row Layout
&__items--row {
flex-wrap: wrap;
gap: $semantic-spacing-component-xl;
@media (max-width: $semantic-breakpoint-lg - 1) {
gap: $semantic-spacing-component-lg;
}
@media (max-width: $semantic-breakpoint-md - 1) {
flex-direction: column;
align-items: center;
gap: $semantic-spacing-component-lg;
}
}
// Grid Layout
&__items--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: $semantic-spacing-component-xl;
width: 100%;
@media (max-width: $semantic-breakpoint-lg - 1) {
grid-template-columns: repeat(2, 1fr);
gap: $semantic-spacing-component-lg;
}
@media (max-width: $semantic-breakpoint-md - 1) {
grid-template-columns: 1fr;
gap: $semantic-spacing-component-lg;
}
}
// Individual Item
&__item {
display: flex;
align-items: flex-start;
gap: $semantic-spacing-component-md;
text-align: left;
.ui-lp-statistics-display--row & {
flex-direction: column;
text-align: center;
align-items: center;
min-width: 200px;
}
@media (prefers-reduced-motion: no-preference) {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp $semantic-motion-duration-slow $semantic-motion-easing-ease forwards;
animation-delay: var(--animation-delay, 0ms);
}
}
// Icon
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: $semantic-sizing-icon-navigation;
height: $semantic-sizing-icon-navigation;
flex-shrink: 0;
fa-icon {
font-size: $semantic-sizing-icon-navigation;
color: $semantic-color-primary;
}
.ui-lp-statistics-display--primary & fa-icon {
color: $semantic-color-on-primary;
}
.ui-lp-statistics-display--row & {
margin-bottom: $semantic-spacing-component-sm;
}
}
// Content Area
&__content {
flex: 1;
.ui-lp-statistics-display--row & {
display: flex;
flex-direction: column;
align-items: center;
}
}
&__value {
display: flex;
align-items: baseline;
gap: $semantic-spacing-component-xs;
margin-bottom: $semantic-spacing-component-xs;
.ui-lp-statistics-display--row & {
justify-content: center;
}
}
&__number {
font-family: map-get($semantic-typography-heading-h1, font-family);
font-size: 3.5rem;
font-weight: map-get($semantic-typography-heading-h1, font-weight);
line-height: 1;
color: $semantic-color-text-primary;
@media (max-width: $semantic-breakpoint-md - 1) {
font-size: 2.5rem;
}
@media (max-width: $semantic-breakpoint-sm - 1) {
font-size: 2rem;
}
}
&__prefix,
&__suffix {
font-family: map-get($semantic-typography-heading-h3, font-family);
font-size: map-get($semantic-typography-heading-h3, font-size);
font-weight: map-get($semantic-typography-heading-h3, font-weight);
color: $semantic-color-text-primary;
@media (max-width: $semantic-breakpoint-md - 1) {
font-family: map-get($semantic-typography-heading-h4, font-family);
font-size: map-get($semantic-typography-heading-h4, font-size);
font-weight: map-get($semantic-typography-heading-h4, font-weight);
}
}
&__label {
font-family: map-get($semantic-typography-heading-h4, font-family);
font-size: map-get($semantic-typography-heading-h4, font-size);
font-weight: map-get($semantic-typography-heading-h4, font-weight);
line-height: map-get($semantic-typography-heading-h4, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-component-xs;
@media (max-width: $semantic-breakpoint-md - 1) {
font-family: map-get($semantic-typography-heading-h5, font-family);
font-size: map-get($semantic-typography-heading-h5, font-size);
font-weight: map-get($semantic-typography-heading-h5, font-weight);
line-height: map-get($semantic-typography-heading-h5, line-height);
}
}
&__description {
font-family: map-get($semantic-typography-body-small, font-family);
font-size: map-get($semantic-typography-body-small, font-size);
font-weight: map-get($semantic-typography-body-small, font-weight);
line-height: map-get($semantic-typography-body-small, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
// Variant Styles
// Card Variant
&--card &__item {
padding: $semantic-spacing-component-xl;
background: $semantic-color-surface-elevated;
border-radius: $semantic-border-card-radius;
box-shadow: $semantic-shadow-card-rest;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
&:hover {
box-shadow: $semantic-shadow-card-hover;
transform: translateY(-2px);
}
}
&--card.ui-lp-statistics-display--primary &__item {
background: $semantic-color-surface-elevated;
border-color: $semantic-color-primary;
.ui-lp-statistics-display__title,
.ui-lp-statistics-display__value,
.ui-lp-statistics-display__label {
color: $semantic-color-text-primary;
}
.ui-lp-statistics-display__subtitle,
.ui-lp-statistics-display__description {
color: $semantic-color-text-secondary;
opacity: 1;
}
}
// Highlighted Variant
&--highlighted &__item {
position: relative;
padding: $semantic-spacing-component-lg;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: $semantic-color-primary;
border-radius: $semantic-border-card-radius;
}
}
// Responsive Adjustments
@media (max-width: $semantic-breakpoint-md - 1) {
padding: $semantic-spacing-layout-section-md 0;
&__header {
margin-bottom: $semantic-spacing-layout-section-sm;
}
&__title {
font-family: map-get($semantic-typography-heading-h3, font-family);
font-size: map-get($semantic-typography-heading-h3, font-size);
font-weight: map-get($semantic-typography-heading-h3, font-weight);
line-height: map-get($semantic-typography-heading-h3, line-height);
}
&__item {
gap: $semantic-spacing-component-sm;
}
&--card &__item {
padding: $semantic-spacing-component-lg;
}
}
@media (max-width: $semantic-breakpoint-sm - 1) {
&__items--row {
gap: $semantic-spacing-component-md;
}
&__items--grid {
gap: $semantic-spacing-component-md;
}
&__icon {
width: $semantic-sizing-icon-button;
height: $semantic-sizing-icon-button;
fa-icon {
font-size: $semantic-sizing-icon-button;
}
}
}
}
// Animation states
@media (prefers-reduced-motion: reduce) {
.ui-lp-statistics-display__item {
opacity: 1;
transform: none;
animation: none;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
Reference in New Issue View Git Blame Copy Permalink