osi-cards-lib 1.0.0

package/styles/components/sections/_network.scss

@@ -0,0 +1,115 @@
+/* Network Section - Modern, Clean Design */
+
+@import 'sections/sections-base';
+@import 'unified-cards';
+
+/* Network Grid Layout */
+.network-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--section-card-gap);
+  width: 100%;
+  
+  @media (max-width: 820px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* Network Card */
+.network-card {
+  @include card;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--card-gap);
+  min-height: auto;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+  position: relative;
+  border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--color-brand);
+    opacity: 0.8;
+    transition: opacity 0.22s ease, width 0.22s ease;
+    border-radius: 0 2px 2px 0;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: var(--color-brand);
+    background: color-mix(in srgb, var(--card-background) 95%, var(--color-brand) 2%);
+    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: 1;
+      width: 4px;
+    }
+    
+    .network-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 */
+.network-card__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.6);
+  align-items: flex-start;
+}
+
+.network-card__label {
+  @include label-text;
+  margin: 0;
+  color: var(--card-text-label);
+  line-height: 1.2;
+}
+
+.network-card__value {
+  @include value-text;
+  font-size: calc(var(--card-value-font-size) * 1.2) !important;
+  font-weight: 700 !important;
+  letter-spacing: var(--card-value-letter-spacing) !important;
+  line-height: var(--card-value-line-height) !important;
+  color: var(--color-brand) !important;
+  margin: 0;
+  transition: color 0.22s ease;
+}
+
+/* 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/_news.scss

@@ -0,0 +1,81 @@
+@import 'sections/sections-base';
+
+/* News section styling - uses general design variables for spacing, color, and layout */
+.ai-section--news {
+  --section-accent: color-mix(in srgb, var(--color-brand) 68%, var(--foreground) 32%);
+  --section-background: color-mix(in srgb, var(--card) 92%, transparent);
+  --section-card-grid-min: 220px;
+}
+
+.news-feed {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--card-gap);
+  width: 100%;
+}
+
+.news-item {
+  @include card;
+  border: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 25%, transparent);
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--card-gap) * 0.5);
+  padding: var(--card-padding);
+  text-align: left;
+  background: var(--section-item-background);
+}
+
+.news-item__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--font-section-meta);
+  color: var(--card-text-muted);
+}
+
+.news-item__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.4);
+  font-size: var(--font-section-meta);
+  color: var(--section-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.news-item__title {
+  font-size: var(--card-value-font-size);
+  font-weight: 600;
+  color: var(--card-text-primary);
+  margin: 0;
+}
+
+.news-item__summary {
+  font-size: var(--font-section-description);
+  margin: 0;
+  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+}
+
+.news-item__meta {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--font-section-meta);
+  color: color-mix(in srgb, var(--foreground) 60%, transparent);
+}
+
+.news-item__value {
+  font-weight: 600;
+  color: var(--section-accent);
+}
+
+.news-item__indicator {
+  font-size: var(--font-section-meta);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: color-mix(in srgb, var(--section-accent) 60%, transparent);
+}

package/styles/components/sections/_overview.scss

@@ -0,0 +1,159 @@
+/* Overview section - Single column premium design */
+/* ENHANCED: Clean, elegant single-column layout with refined styling */
+
+@import 'design-system';
+
+.overview-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: calc(var(--section-card-gap) * 0.7) !important;
+  padding: 0;
+  width: 100%;
+}
+
+.overview-card {
+  @include card;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: auto;
+  padding: calc(var(--card-padding) * 0.625) calc(var(--card-padding) * 0.875) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  background: var(--card-background);
+  
+  /* Left accent border */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(180deg, var(--color-brand), color-mix(in srgb, var(--color-brand) 60%, transparent));
+    opacity: 1;
+    transition: opacity 0.3s ease, width 0.3s ease;
+    border-radius: 0 2px 2px 0;
+  }
+
+  /* Subtle bottom divider */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: calc(var(--card-padding) * 0.875);
+    right: calc(var(--card-padding) * 0.875);
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent,
+      color-mix(in srgb, var(--foreground) 6%, transparent) 50%,
+      transparent);
+    opacity: 0.6;
+    transition: opacity 0.3s ease;
+  }
+
+  /* Minimalistic hover effect */
+  &: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: 1;
+      width: 4px;
+    }
+    
+    .overview-card__label {
+      color: color-mix(in srgb, var(--foreground) 70%, transparent);
+    }
+    
+    .overview-card__value {
+      color: color-mix(in srgb, var(--foreground) 90%, var(--color-brand) 10%);
+    }
+  }
+
+  /* Remove divider from last card */
+  &:last-child::after {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--card-gap) * 0.5);
+    width: 100%;
+  }
+
+  &__label {
+    @include label-text;
+    font-size: calc(var(--card-label-font-size) + 1px);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--card-text-label);
+    line-height: 1.3;
+    margin: 0;
+    transition: color 0.22s ease;
+    word-break: break-word;
+  }
+
+  &__value {
+    @include value-text;
+    font-size: calc(var(--card-value-font-size) * 1.2) !important;
+    font-weight: 700;
+    line-height: 1.4;
+    color: var(--color-brand);
+    margin: 0;
+    transition: color 0.22s ease;
+    word-break: break-word;
+    letter-spacing: -0.01em;
+  }
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 640px) {
+  .overview-card {
+    padding: calc(var(--card-padding) * 0.875) !important;
+    
+    &__content {
+      gap: calc(var(--card-gap) * 0.625);
+    }
+    
+    &__label {
+      font-size: calc(var(--card-label-font-size) * 0.95);
+    }
+    
+    &__value {
+      font-size: calc(var(--card-value-font-size) * 0.95);
+    }
+  }
+}
+
+.overview-empty {
+  @include empty-state;
+}
+
+/* Light theme overrides */
+:root[data-theme='day'] {
+  .overview-card {
+    &__label {
+      color: #6b7280;
+    }
+    
+    &__value {
+      color: #1a1a1a;
+    }
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.98);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08),
+                  0 0 0 1px rgba(255, 121, 0, 0.15);
+    }
+  }
+}