osi-cards-lib 1.5.2 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",

package/styles/_components.scss

@@ -1,13 +1,13 @@
 /* ===================================================================
    SHARED COMPONENT STYLES BUNDLE
-   
+
    This file contains all component imports shared across all entry points:
    - _styles.scss (demo app, :root scope)
    - _styles-scoped.scss (integration, .osi-cards-container scope)
    - _styles-standalone.scss (full isolation with Bootstrap reset)
-   
+
    Each entry point imports this bundle after setting up its scope and variables.
-   
+
    Note: Using @import here as Sass @use/@forward requires restructuring
    the entire SCSS architecture. These warnings can be safely ignored
    until Dart Sass 3.0.0 when migration will be required.
@@ -33,27 +33,6 @@
 
 // Component styles
 @import "components/cards/ai-card";
-@import "components/sections/design-system"; /* Master design system - must import first */
-@import "components/sections/sections-base";
-@import "components/sections/section-types";
-@import "components/sections/section-shell";
-@import "components/sections/overview";
-@import "components/sections/analytics";
-@import "components/sections/news";
-@import "components/sections/social-media";
-@import "components/sections/info";
-@import "components/sections/map";
-@import "components/sections/list";
-@import "components/sections/contact";
-@import "components/sections/network";
-@import "components/sections/product";
-@import "components/sections/chart";
-@import "components/sections/event";
-@import "components/sections/financials";
-@import "components/sections/solutions";
-@import "components/sections/quotation";
-@import "components/sections/text-reference";
-@import "components/sections/brand-colors";
-@import "components/sections/fallback";
-@import "components/sections/unified-cards"; /* Must be last to override all section-specific styles */
-@import "components/sections/global-enforcement"; /* GLOBAL ENFORCEMENT - MUST BE ABSOLUTELY LAST to enforce all settings */
+
+// All section styles (consolidated)
+@import "components/sections/sections-all";

package/styles/_index.scss

@@ -0,0 +1,28 @@
+/**
+ * OSI Cards Style System
+ * Single entry point for all styles
+ *
+ * Usage in applications:
+ * @use 'osi-cards-lib/styles' as osi;
+ *
+ * Or import individual parts:
+ * @use 'osi-cards-lib/styles/tokens' as tokens;
+ * @use 'osi-cards-lib/styles/mixins' as mixins;
+ */
+
+// Design tokens (CSS custom properties)
+@forward 'osi-cards-tokens';
+
+// SCSS mixins and utilities
+@forward 'osi-cards-mixins';
+
+// Component styles
+@forward 'components/card' as card-*;
+@forward 'components/section' as section-*;
+
+// Optional: Theme utilities
+@forward 'themes/light' as light-*;
+@forward 'themes/dark' as dark-*;
+
+
+

package/styles/_osi-cards-mixins.scss

@@ -0,0 +1,430 @@
+/**
+ * OSI Cards SCSS Mixins
+ * Reusable style patterns for components
+ *
+ * Usage:
+ * @use 'osi-cards-mixins' as mixins;
+ *
+ * .my-component {
+ *   @include mixins.card-base;
+ * }
+ */
+
+// ============================================================================
+// CARD MIXINS
+// ============================================================================
+
+/// Base card styles
+@mixin card-base {
+  background: var(--osi-card-bg, white);
+  border: 1px solid var(--osi-card-border, var(--osi-neutral-200));
+  border-radius: var(--osi-card-radius, var(--osi-radius-xl));
+  box-shadow: var(--osi-card-shadow, var(--osi-shadow-md));
+}
+
+/// Card hover state
+@mixin card-hover {
+  transition: transform var(--osi-duration-200) var(--osi-ease-out),
+              box-shadow var(--osi-duration-200) var(--osi-ease-out);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--osi-shadow-lg);
+  }
+}
+
+/// Card interactive (clickable)
+@mixin card-interactive {
+  @include card-hover;
+  cursor: pointer;
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: var(--osi-shadow-sm);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--osi-primary-500);
+    outline-offset: 2px;
+  }
+}
+
+// ============================================================================
+// SECTION MIXINS
+// ============================================================================
+
+/// Base section styles
+@mixin section-base {
+  padding: var(--osi-spacing-4);
+
+  & + & {
+    border-top: 1px solid var(--osi-border-default);
+  }
+}
+
+/// Section header styles
+@mixin section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--osi-spacing-2);
+  margin-bottom: var(--osi-spacing-3);
+  font-size: var(--osi-text-sm);
+  font-weight: var(--osi-font-semibold);
+  color: var(--osi-section-header-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/// Section content styles
+@mixin section-content {
+  color: var(--osi-section-content-color);
+  font-size: var(--osi-text-sm);
+  line-height: var(--osi-leading-relaxed);
+}
+
+// ============================================================================
+// FIELD MIXINS
+// ============================================================================
+
+/// Field container
+@mixin field-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osi-field-gap);
+}
+
+/// Field label
+@mixin field-label {
+  font-size: var(--osi-text-xs);
+  font-weight: var(--osi-font-medium);
+  color: var(--osi-field-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/// Field value
+@mixin field-value {
+  font-size: var(--osi-text-base);
+  font-weight: var(--osi-font-medium);
+  color: var(--osi-field-value-color);
+}
+
+/// Field value large (for metrics)
+@mixin field-value-lg {
+  font-size: var(--osi-text-2xl);
+  font-weight: var(--osi-font-bold);
+  color: var(--osi-field-value-color);
+  line-height: var(--osi-leading-tight);
+}
+
+// ============================================================================
+// GRID MIXINS
+// ============================================================================
+
+/// Responsive grid container
+@mixin grid-container($min-column: 200px, $gap: var(--osi-grid-gap)) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($min-column, 1fr));
+  gap: $gap;
+}
+
+/// Fixed column grid
+@mixin grid-fixed($columns: 2, $gap: var(--osi-grid-gap)) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+}
+
+/// Masonry-like grid (using CSS grid)
+@mixin masonry-grid($min-column: 250px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax($min-column, 1fr));
+  grid-auto-rows: 20px;
+  gap: var(--osi-spacing-4);
+}
+
+// ============================================================================
+// TYPOGRAPHY MIXINS
+// ============================================================================
+
+/// Heading styles
+@mixin heading($level: 1) {
+  font-family: var(--osi-font-sans);
+  font-weight: var(--osi-font-bold);
+  line-height: var(--osi-leading-tight);
+  color: var(--osi-text-primary);
+
+  @if $level == 1 {
+    font-size: var(--osi-text-3xl);
+  } @else if $level == 2 {
+    font-size: var(--osi-text-2xl);
+  } @else if $level == 3 {
+    font-size: var(--osi-text-xl);
+  } @else if $level == 4 {
+    font-size: var(--osi-text-lg);
+  } @else {
+    font-size: var(--osi-text-base);
+  }
+}
+
+/// Body text
+@mixin body-text {
+  font-family: var(--osi-font-sans);
+  font-size: var(--osi-text-base);
+  font-weight: var(--osi-font-normal);
+  line-height: var(--osi-leading-normal);
+  color: var(--osi-text-secondary);
+}
+
+/// Small text
+@mixin small-text {
+  font-size: var(--osi-text-sm);
+  color: var(--osi-text-tertiary);
+}
+
+/// Truncate text with ellipsis
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Multi-line truncate
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// ============================================================================
+// BUTTON MIXINS
+// ============================================================================
+
+/// Base button styles
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--osi-spacing-2);
+  padding: var(--osi-btn-padding-y) var(--osi-btn-padding-x);
+  font-size: var(--osi-btn-font-size);
+  font-weight: var(--osi-btn-font-weight);
+  border-radius: var(--osi-btn-radius);
+  border: none;
+  cursor: pointer;
+  transition: all var(--osi-duration-150) var(--osi-ease-out);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--osi-primary-500);
+    outline-offset: 2px;
+  }
+}
+
+/// Primary button
+@mixin button-primary {
+  @include button-base;
+  background: var(--osi-primary-500);
+  color: white;
+
+  &:hover:not(:disabled) {
+    background: var(--osi-primary-600);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--osi-primary-700);
+  }
+}
+
+/// Secondary button
+@mixin button-secondary {
+  @include button-base;
+  background: var(--osi-neutral-100);
+  color: var(--osi-text-primary);
+
+  &:hover:not(:disabled) {
+    background: var(--osi-neutral-200);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--osi-neutral-300);
+  }
+}
+
+/// Ghost button
+@mixin button-ghost {
+  @include button-base;
+  background: transparent;
+  color: var(--osi-text-secondary);
+
+  &:hover:not(:disabled) {
+    background: var(--osi-neutral-100);
+    color: var(--osi-text-primary);
+  }
+}
+
+// ============================================================================
+// UTILITY MIXINS
+// ============================================================================
+
+/// Visually hidden (for screen readers)
+@mixin visually-hidden {
+  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;
+}
+
+/// Reset list styles
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Reset button styles
+@mixin button-reset {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+/// Flexbox center
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/// Flex column
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+/// Flex between
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/// Absolute fill (position absolute, fill container)
+@mixin absolute-fill {
+  position: absolute;
+  inset: 0;
+}
+
+/// Fixed fill (position fixed, fill viewport)
+@mixin fixed-fill {
+  position: fixed;
+  inset: 0;
+}
+
+// ============================================================================
+// RESPONSIVE MIXINS
+// ============================================================================
+
+/// Mobile-first breakpoint
+@mixin breakpoint($size) {
+  @if $size == 'sm' {
+    @media (min-width: 640px) { @content; }
+  } @else if $size == 'md' {
+    @media (min-width: 768px) { @content; }
+  } @else if $size == 'lg' {
+    @media (min-width: 1024px) { @content; }
+  } @else if $size == 'xl' {
+    @media (min-width: 1280px) { @content; }
+  } @else if $size == '2xl' {
+    @media (min-width: 1536px) { @content; }
+  }
+}
+
+/// Max-width breakpoint
+@mixin breakpoint-down($size) {
+  @if $size == 'sm' {
+    @media (max-width: 639px) { @content; }
+  } @else if $size == 'md' {
+    @media (max-width: 767px) { @content; }
+  } @else if $size == 'lg' {
+    @media (max-width: 1023px) { @content; }
+  } @else if $size == 'xl' {
+    @media (max-width: 1279px) { @content; }
+  }
+}
+
+// ============================================================================
+// ANIMATION MIXINS
+// ============================================================================
+
+/// Fade in animation
+@mixin fade-in($duration: var(--osi-duration-200)) {
+  animation: osi-fade-in $duration var(--osi-ease-out);
+}
+
+/// Slide up animation
+@mixin slide-up($duration: var(--osi-duration-300)) {
+  animation: osi-slide-up $duration var(--osi-ease-out);
+}
+
+/// Pulse animation
+@mixin pulse($duration: 2s) {
+  animation: osi-pulse $duration infinite;
+}
+
+/// Loading shimmer
+@mixin loading-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--osi-neutral-200) 25%,
+    var(--osi-neutral-100) 50%,
+    var(--osi-neutral-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: osi-shimmer 1.5s infinite;
+}
+
+// Keyframe definitions
+@keyframes osi-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes osi-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes osi-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes osi-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+
+