osi-cards-lib 1.0.0

package/styles/components/sections/_event.scss

@@ -0,0 +1,246 @@
+/* Event Section - Timeline Design (Keeping the style you liked) */
+
+@import 'sections/sections-base';
+@import 'unified-cards';
+
+/* Event Timeline Container */
+.event-timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--section-card-gap) * 0.9);
+  padding-left: calc(var(--card-padding) * 1.5);
+}
+
+/* Vertical Timeline Line */
+.event-timeline__line {
+  position: absolute;
+  left: calc(var(--card-padding) * 0.75);
+  top: calc(var(--card-padding) * 0.75);
+  bottom: calc(var(--card-padding) * 0.75);
+  width: 2px;
+  background: var(--color-brand);
+  z-index: 0;
+}
+
+/* Event Card */
+.event-card {
+  @include card;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--card-gap);
+  min-height: auto;
+  z-index: 1;
+  cursor: pointer;
+  padding: var(--card-padding) !important;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--card-background);
+  overflow: hidden;
+
+  /* ENHANCED: Subtle accent indicator */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(180deg, var(--color-brand), transparent);
+    opacity: 0;
+    transition: opacity 0.22s ease;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px color-mix(in srgb, var(--foreground) 12%, transparent),
+                0 0 0 1px color-mix(in srgb, var(--color-brand) 15%, transparent);
+
+    &::before {
+      opacity: 0.6;
+    }
+
+    .event-card__title {
+      color: color-mix(in srgb, var(--foreground) 90%, var(--color-brand) 10%);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+}
+
+/* Timeline Marker (Circular Icon) */
+.event-card__marker {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 3px solid var(--color-brand);
+  background: color-mix(in srgb, var(--color-brand) 15%, transparent);
+  color: var(--color-brand);
+  margin-top: 2px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-brand) 15%, transparent);
+}
+
+.event-card:hover .event-card__marker {
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand) 25%, transparent),
+              0 0 0 4px color-mix(in srgb, var(--color-brand) 10%, transparent);
+  transform: scale(1.1);
+}
+
+.event-card__marker-icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* Connector Line from Marker to Timeline */
+.event-card__marker-line {
+  position: absolute;
+  left: -21px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 2px;
+  background: var(--color-brand);
+  opacity: 0.8;
+}
+
+/* Event Card Content */
+.event-card__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.75);
+}
+
+/* Event Header */
+.event-card__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.75);
+}
+
+.event-card__title {
+  @include card-title-text;
+  margin: 0;
+  line-height: 1.3;
+  color: var(--card-text-primary);
+  flex: 1;
+  min-width: 0;
+  font-weight: 700;
+  font-size: calc(var(--card-title-font-size) * 1.15);
+  transition: color 0.22s ease;
+  letter-spacing: -0.01em;
+}
+
+.event-card__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: calc(var(--tag-padding-y-sm) * 1) calc(var(--tag-padding-x) * 1);
+  border-radius: calc(var(--section-card-border-radius) * 0.8);
+  font-size: calc(var(--card-meta-font-size) + 1px);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+    box-shadow: none;
+
+  &[data-status="completed"],
+    &[data-status="done"],
+    &[data-status="success"] {
+    color: var(--color-success, #10b981);
+    background: color-mix(in srgb, var(--color-success, #10b981) 12%, transparent);
+    font-weight: 600;
+  }
+
+  &[data-status="in-progress"],
+  &[data-status="in progress"],
+  &[data-status="active"] {
+    color: var(--color-brand);
+    background: color-mix(in srgb, var(--color-brand) 15%, transparent);
+    font-weight: 600;
+  }
+
+  &[data-status="pending"],
+  &[data-status="upcoming"],
+  &[data-status="planned"] {
+    color: var(--color-warning, #f59e0b);
+    background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent);
+    font-weight: 600;
+  }
+
+  &[data-status="blocked"],
+  &[data-status="delayed"],
+  &[data-status="cancelled"] {
+    color: var(--color-error, #ef4444);
+    background: color-mix(in srgb, var(--color-error, #ef4444) 12%, transparent);
+    font-weight: 600;
+  }
+}
+
+/* Date and Time */
+.event-card__datetime {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--card-gap) * 1.5);
+}
+
+.event-card__date,
+.event-card__time {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.5);
+  @include card-meta-text;
+  color: var(--card-text-secondary);
+}
+
+.event-card__datetime-icon {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  opacity: 0.7;
+  color: var(--card-text-muted);
+}
+
+/* Event Description */
+.event-card__description {
+  @include card-subtitle-text;
+  margin: 0;
+  color: var(--card-text-secondary);
+  line-height: 1.5;
+}
+
+/* Empty State */
+.section-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--card-padding) * 3);
+  text-align: center;
+  color: var(--card-text-muted);
+}
+
+.section-empty__icon {
+  margin-bottom: calc(var(--card-gap) * 1.5);
+  opacity: 0.5;
+}
+
+.section-empty__text {
+  @include card-meta-text;
+  margin: 0;
+  color: var(--card-text-muted);
+}

package/styles/components/sections/_fallback.scss

@@ -0,0 +1,172 @@
+/* Fallback section styling - Generic section for unmapped types */
+
+@import 'sections/sections-base';
+
+.fallback-section {
+  @include card;
+
+  .fallback-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--card-padding) * 0.75) 0; /* COMPACT: Reduced padding */
+    text-align: center;
+    min-height: auto; /* COMPACT: No minimum height */
+    margin: 0;
+  }
+
+  .fallback-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+    border-radius: 50%;
+    background: var(--card-background);
+    color: rgba(255, 180, 91, 1);
+    font-size: var(--icon-size-lg);
+  }
+
+  .fallback-message {
+    font-size: var(--font-section-value);
+    font-weight: 600;
+    color: var(--foreground);
+    line-height: 1.2;
+  }
+
+  .fallback-description {
+    font-size: var(--font-section-description);
+    color: color-mix(in srgb, var(--foreground) 85%, transparent);
+    line-height: 1.2; /* COMPACT: Reduced from 1.3 */
+    max-width: 100%;
+  }
+
+  .fallback-type-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+    padding: calc(var(--tag-padding-y-sm) * 0.75) calc(var(--tag-padding-x) * 0.875); /* COMPACT: Reduced padding */
+    border-radius: var(--section-card-border-radius);
+    border: none !important; /* CLEAN: No borders on hints - only cards have borders */
+    background: color-mix(in srgb, var(--card-background) 60%, transparent);
+    font-size: var(--card-label-font-size);
+    color: color-mix(in srgb, var(--foreground) 88%, transparent);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+
+    .hint-label {
+      font-weight: 600;
+    }
+
+    .hint-value {
+      font-weight: 500;
+      color: color-mix(in srgb, var(--foreground) 85%, transparent);
+    }
+  }
+
+  .fallback-fields {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--section-card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+    width: 100%;
+  }
+
+  .fallback-field {
+    @include card; /* Use unified card mixin for consistency */
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+    margin: 0;
+
+    .field-label {
+      font-size: var(--font-section-label);
+      color: color-mix(in srgb, var(--foreground) 80%, transparent);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      line-height: 1.2;
+    }
+
+    .field-value {
+      font-size: var(--font-section-value);
+      font-weight: 600;
+      color: var(--foreground);
+      line-height: 1.2;
+      word-break: break-word;
+    }
+  }
+
+  .fallback-info {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+    padding: calc(var(--card-padding) * 0.75); /* COMPACT: Reduced padding */
+    border-radius: var(--section-card-border-radius);
+    background: color-mix(in srgb, var(--card-background) 60%, transparent);
+    border: none !important; /* CLEAN: No borders on info elements - only cards have borders */
+    font-size: var(--font-section-meta);
+    color: color-mix(in srgb, var(--foreground) 88%, transparent);
+    line-height: 1.2; /* COMPACT: Tight line-height */
+
+    .info-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--icon-size-md);
+      height: var(--icon-size-md);
+      border-radius: 50%;
+      background: var(--card-border);
+      color: rgba(255, 180, 91, 1);
+      font-size: var(--font-section-tag-sm);
+    }
+
+    .info-text {
+      flex: 1;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .fallback-section {
+    .fallback-content {
+      padding: calc(var(--card-padding) * 0.75) 0; /* COMPACT: Reduced padding */
+      min-height: auto; /* COMPACT: No minimum height */
+    }
+
+    .fallback-icon {
+      width: var(--icon-size-lg);
+      height: var(--icon-size-lg);
+      font-size: var(--icon-size-md);
+    }
+
+    .fallback-message {
+      font-size: var(--font-section-value-lg);
+    }
+
+    .fallback-description {
+      font-size: var(--font-section-description-mobile);
+    }
+
+    .fallback-fields {
+      gap: calc(var(--section-card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+      margin-top: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced margin */
+    }
+
+    .fallback-field {
+      /* Padding is set by @include card */
+    }
+
+    .fallback-info {
+      font-size: var(--font-section-tag-sm);
+      margin-top: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced margin */
+
+      .info-icon {
+        width: var(--icon-size-sm);
+        height: var(--icon-size-sm);
+        font-size: var(--font-section-tag-sm);
+      }
+    }
+  }
+}

package/styles/components/sections/_financials.scss

@@ -0,0 +1,258 @@
+/* Financials Section - Enhanced Modern Design */
+
+@import 'sections/sections-base';
+@import 'unified-cards';
+
+/* Financials Grid Layout */
+.financials-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--section-card-gap);
+  width: 100%;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: calc(var(--section-card-gap) * 0.875);
+  }
+
+  @media (max-width: 520px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Financial Card - Minimalistic Design */
+.financial-card {
+  @include card;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--card-gap);
+  min-height: auto;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
+  
+  /* Horizontal layout optimization */
+  .financial-card__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Left accent border - minimalistic */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: var(--color-brand);
+    opacity: 1;
+    transition: opacity 0.22s ease, width 0.22s ease;
+    border-radius: 0 2px 2px 0;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px color-mix(in srgb, var(--foreground) 12%, transparent),
+                0 0 0 1px color-mix(in srgb, var(--color-brand) 15%, transparent);
+    border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
+
+    &::before {
+      opacity: 1;
+      width: 6px;
+    }
+
+    .financial-card__value {
+      color: color-mix(in srgb, var(--foreground) 90%, var(--color-brand) 10%);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+}
+
+/* Card Content */
+.financial-card__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.625);
+  position: relative;
+  z-index: 1;
+}
+
+.financial-card__label {
+  @include label-text;
+  margin: 0;
+  color: var(--card-text-label);
+  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.375);
+  transition: color 0.22s ease;
+  text-transform: uppercase;
+  font-size: calc(var(--card-label-font-size) * 0.95);
+
+  .financial-card:hover & {
+    color: color-mix(in srgb, var(--card-text-label) 90%, #FF7900 10%);
+  }
+}
+
+.financial-card__value-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: calc(var(--card-gap) * 0.625);
+  flex-wrap: wrap;
+}
+
+.financial-card__value {
+  @include value-text;
+  margin: 0;
+  color: var(--color-brand);
+  line-height: 1.2;
+  display: flex;
+  align-items: baseline;
+  gap: calc(var(--card-gap) * 0.375);
+  font-weight: 700;
+  font-size: calc(var(--card-value-font-size) * 1.3) !important;
+  letter-spacing: -0.01em;
+  transition: color 0.22s ease;
+
+  &--currency {
+    color: var(--color-brand);
+  }
+}
+
+.financial-card__currency-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  opacity: 0.9;
+  color: var(--color-brand);
+  transition: opacity 0.22s ease;
+}
+
+.financial-card__trend-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  opacity: 0.8;
+  transition: opacity 0.22s ease;
+
+  .financial-card:hover & {
+    opacity: 1;
+  }
+}
+
+/* Change Indicator - Minimalistic */
+.financial-card__change {
+  flex-shrink: 0;
+  @include card-meta-text;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: right;
+  white-space: nowrap;
+  padding: calc(var(--card-gap) * 0.5) calc(var(--card-gap) * 0.8);
+  border-radius: calc(var(--card-border-radius) * 0.5);
+  background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  transition: background 0.22s ease;
+  letter-spacing: 0.02em;
+  font-size: calc(var(--card-meta-font-size) + 1px);
+
+  &.text-emerald-400 {
+    color: var(--color-brand) !important;
+    background: color-mix(in srgb, var(--color-brand) 15%, transparent) !important;
+  }
+
+  &.text-rose-400 {
+    color: #ef4444 !important;
+    background: color-mix(in srgb, #ef4444 10%, transparent) !important;
+  }
+
+  &.text-amber-400 {
+    color: #f59e0b !important;
+    background: color-mix(in srgb, #f59e0b 10%, transparent) !important;
+  }
+
+  &.text-muted-foreground {
+    color: var(--card-text-muted) !important;
+    background: color-mix(in srgb, var(--foreground) 6%, transparent) !important;
+  }
+}
+
+/* Empty State */
+.section-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--card-padding) * 2.5);
+  text-align: center;
+  color: var(--card-text-muted);
+  border-radius: var(--card-border-radius);
+  background: color-mix(in srgb, var(--foreground) 2%, transparent);
+  transition: all 0.2s ease;
+}
+
+.section-empty__icon {
+  margin-bottom: calc(var(--card-gap) * 1.25);
+  opacity: 0.5;
+  color: color-mix(in srgb, var(--color-brand) 50%, transparent);
+  transition: all 0.2s ease;
+}
+
+.section-empty__text {
+  @include card-meta-text;
+  margin: 0;
+  color: var(--card-text-muted);
+  font-weight: 500;
+}
+
+.section-empty:hover {
+  background: color-mix(in srgb, var(--foreground) 3%, transparent);
+
+  .section-empty__icon {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .financial-card {
+    gap: calc(var(--card-gap) * 0.875);
+  }
+
+  .financial-card__content {
+    gap: calc(var(--card-gap) * 0.5);
+  }
+
+  .financial-card__value-wrapper {
+    gap: calc(var(--card-gap) * 0.5);
+  }
+
+  .financial-card__change {
+    padding: calc(var(--card-gap) * 0.25) calc(var(--card-gap) * 0.5);
+    font-size: var(--card-meta-font-size);
+  }
+}
+
+@media (max-width: 520px) {
+  .financial-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .financial-card__change {
+    align-self: flex-end;
+    margin-top: calc(var(--card-gap) * 0.5);
+  }
+}