@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.8

package/src/styles/components/base/card.css

@@ -0,0 +1,601 @@
+/* Card Component CSS Variables */
+:root {
+  /* Card Base Variables */
+  --card-padding-base: var(--cs-spacing-scale-lg);
+  --card-padding-compact: var(--cs-spacing-scale-md);
+  --card-padding-spacious: var(--cs-spacing-scale-xl);
+  
+  /* Card Border Variables */
+  --card-border-radius: var(--cs-border-radius-lg);
+  --card-border-width: var(--card-border-width-normal);
+  --card-border-color: var(--cs-colors-border);
+  --card-border-color-hover: var(--cs-colors-border);
+  --card-border-color-focus: var(--cs-colors-interactive-focus);
+  
+  /* Card Shadow Variables */
+  --card-shadow-base: var(--cs-shadows-sm);
+  --card-shadow-elevated: var(--cs-shadows-md);
+  --card-shadow-interactive: var(--cs-shadows-lg);
+  --card-shadow-hover: var(--cs-shadows-md);
+  --card-shadow-focus: var(--cs-shadows-lg);
+  
+  /* Card Background Variables */
+  --card-background: var(--cs-colors-surface-background);
+  --card-background-hover: var(--cs-colors-surface-surface);
+  --card-background-active: var(--cs-colors-surface-surface);
+  --card-background-focus: var(--cs-colors-surface-background);
+  
+  /* Card Text Variables */
+  --card-text-primary: var(--cs-colors-text-primary);
+  --card-text-secondary: var(--cs-colors-text-secondary);
+  --card-text-muted: var(--cs-colors-text-muted);
+  --card-text-inverse: var(--cs-colors-text-inverse);
+  
+  /* Card Spacing Variables */
+  --card-spacing-header: var(--cs-spacing-scale-lg);
+  --card-spacing-content: var(--cs-spacing-scale-lg);
+  --card-spacing-footer: var(--cs-spacing-scale-lg);
+  --card-spacing-compact: var(--cs-spacing-scale-md);
+  --card-spacing-spacious: var(--cs-spacing-scale-xl);
+  
+  /* Card Transition Variables */
+  --card-transition-duration: var(--cs-transitions-duration-normal);
+  --card-transition-easing: var(--cs-transitions-easing-ease);
+  --card-transition-properties: all var(--card-transition-duration) var(--card-transition-easing);
+  
+  /* Card Layout Variables */
+  --card-min-height: auto;
+  --card-max-width: none;
+  --card-width: auto;
+  
+  /* Card Interactive Variables */
+  --card-cursor-default: default;
+  --card-cursor-interactive: pointer;
+  --card-outline-focus: var(--card-border-width-focus) solid var(--cs-colors-interactive-focus);
+  --card-outline-offset: var(--card-outline-offset-focus);
+  
+  /* Card Typography Variables */
+  --card-title-font-size: var(--cs-fonts-display-sizes-sm);
+    --card-title-font-weight: var(--cs-fonts-display-weights-semibold);
+  --card-title-line-height: var(--cs-fonts-display-line-heights-tight);
+  --card-title-letter-spacing: var(--cs-fonts-display-letter-spacing-tight);
+
+  --card-description-font-size: var(--cs-fonts-body-sizes-sm);
+  --card-description-font-weight: var(--cs-fonts-body-weights-normal);
+  --card-description-line-height: var(--cs-fonts-body-line-heights-normal);
+  --card-description-letter-spacing: var(--cs-fonts-body-letter-spacing-normal);
+  
+  /* Card Responsive Variables */
+  --card-mobile-padding: var(--cs-spacing-scale-md);
+  --card-tablet-padding: var(--cs-spacing-scale-lg);
+  --card-desktop-padding: var(--cs-spacing-scale-xl);
+  
+  /* Card Animation Variables */
+  --card-transform-hover: translateY(var(--card-transform-hover-y));
+  --card-transform-active: translateY(var(--cs-spacing-scale-none));
+  --card-transform-focus: var(--cs-animation-transforms-scale-up);
+  
+  /* Card Accessibility Variables */
+  --card-focus-ring-color: var(--cs-colors-interactive-focus);
+  --card-focus-ring-width: var(--card-focus-ring-width);
+  --card-focus-ring-offset: var(--card-focus-ring-offset);
+  --card-focus-ring-radius: var(--cs-border-radius-md);
+  
+  /* Card Border Width Variables - Now using theme variables */
+  --card-border-width-normal: var(--cs-border-width-normal);
+  --card-border-width-focus: var(--cs-border-width-focus);
+  --card-border-width-thick: var(--cs-border-width-thick);
+  --card-border-width-extra-thick: var(--cs-border-width-extra-thick);
+  
+  /* Card Outline Variables - Now using theme variables */
+  --card-outline-offset-focus: var(--cs-accessibility-outline-offset);
+  --card-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --card-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  
+  /* Card Animation Variables - Now using theme variables */
+  --card-animation-duration-fast: var(--cs-animation-duration-fast);
+  --card-animation-duration-slow: var(--cs-animation-duration-slow);
+  --card-animation-offset-y: var(--cs-animation-transforms-offset-y);
+  --card-transform-hover-y: var(--cs-animation-transforms-hover-y);
+  
+  /* Card Container Query Variables - Now using theme variables */
+  --card-container-breakpoint-small: var(--cs-container-query-small);
+  --card-container-breakpoint-medium: var(--cs-container-query-medium);
+  
+  /* Card Print Theme Variables - Now using theme variables */
+  --card-print-border-color: var(--cs-print-border-color);
+  --card-print-text-color: var(--cs-print-text-color);
+  --card-print-text-secondary-color: var(--cs-print-text-secondary-color);
+  
+  /* Card High Contrast Variables - Now using theme variables */
+  --card-high-contrast-border-width: var(--cs-accessibility-high-contrast-border-width);
+  --card-high-contrast-outline-width: var(--cs-accessibility-high-contrast-outline-width);
+  
+  /* Card Shimmer Effect Variables - Now using theme variables */
+  --card-shimmer-alpha: var(--cs-shimmer-alpha);
+}
+
+/* Dark Mode Overrides */
+.dark {
+  --card-background: var(--cs-modes-dark-colors-surface-background);
+  --card-background-hover: var(--cs-modes-dark-colors-surface-surface);
+  --card-background-active: var(--cs-modes-dark-colors-surface-surface);
+  --card-background-focus: var(--cs-modes-dark-colors-surface-background);
+  
+  --card-text-primary: var(--cs-modes-dark-colors-text-primary);
+  --card-text-secondary: var(--cs-modes-dark-colors-text-secondary);
+  --card-text-muted: var(--cs-modes-dark-colors-text-muted);
+  --card-text-inverse: var(--cs-modes-dark-colors-text-inverse);
+  
+  --card-border-color: var(--cs-modes-dark-colors-border);
+  --card-border-color-hover: var(--cs-modes-dark-colors-border);
+  --card-border-color-focus: var(--cs-modes-dark-colors-interactive-focus);
+}
+
+/* Base Card Component */
+.card {
+  /* Base Styles */
+  background-color: var(--card-background);
+  border: var(--card-border-width) solid var(--card-border-color);
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--card-shadow-base);
+  color: var(--card-text-primary);
+  cursor: var(--card-cursor-default);
+  display: block;
+  font-family: inherit;
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  min-height: var(--card-min-height);
+  max-width: var(--card-max-width);
+  overflow: hidden;
+  position: relative;
+  text-decoration: none;
+  transition: var(--card-transition-properties);
+  width: var(--card-width);
+  
+  /* Focus Management */
+  outline: none;
+}
+
+/* Card Variants */
+.card--variant-default {
+  /* Default variant - no additional styles needed */
+}
+
+.card--variant-primary {
+  border-color: var(--cs-colors-primary-500);
+  background-color: var(--cs-colors-primary-50);
+}
+
+.card--variant-secondary {
+  border-color: var(--cs-colors-secondary-500);
+  background-color: var(--cs-colors-secondary-50);
+}
+
+.card--variant-success {
+  border-color: var(--cs-colors-semantic-success);
+  background-color: rgba(var(--cs-colors-semantic-success-rgb), var(--cs-colors-alpha-low));
+}
+
+.card--variant-warning {
+  border-color: var(--cs-colors-semantic-warning);
+  background-color: rgba(var(--cs-colors-semantic-warning-rgb), var(--cs-colors-alpha-low));
+}
+
+.card--variant-error {
+  border-color: var(--cs-colors-semantic-error);
+  background-color: rgba(var(--cs-colors-semantic-error-rgb), var(--cs-colors-alpha-low));
+}
+
+/* Card Elevations */
+.card--elevation-base {
+  box-shadow: var(--card-shadow-base);
+}
+
+.card--elevation-elevated {
+  box-shadow: var(--card-shadow-elevated);
+}
+
+.card--elevation-interactive {
+  box-shadow: var(--card-shadow-interactive);
+}
+
+/* Card Sizes */
+.card--size-compact {
+  padding: var(--card-padding-compact);
+}
+
+.card--size-normal {
+  padding: var(--card-padding-base);
+}
+
+.card--size-spacious {
+  padding: var(--card-padding-spacious);
+}
+
+/* Card Interactive States */
+.card--interactive {
+  cursor: var(--card-cursor-interactive);
+}
+
+.card--interactive:hover {
+  background-color: var(--card-background-hover);
+  border-color: var(--card-border-color-hover);
+  box-shadow: var(--card-shadow-hover);
+  transform: var(--card-transform-hover);
+}
+
+.card--interactive:active {
+  background-color: var(--card-background-active);
+  transform: var(--card-transform-active);
+}
+
+.card--interactive:focus-visible {
+  background-color: var(--card-background-focus);
+  border-color: var(--card-border-color-focus);
+  box-shadow: var(--card-shadow-focus);
+  outline: var(--card-outline-focus);
+  outline-offset: var(--card-outline-offset);
+  transform: var(--card-transform-focus);
+}
+
+/* Card Header */
+.card__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-sm);
+  padding: var(--card-spacing-header);
+  padding-bottom: var(--cs-spacing-scale-md);
+}
+
+.card__header--spacing-compact {
+  padding: var(--card-spacing-compact);
+  padding-bottom: var(--cs-spacing-scale-sm);
+}
+
+.card__header--spacing-normal {
+  padding: var(--card-spacing-header);
+  padding-bottom: var(--cs-spacing-scale-md);
+}
+
+.card__header--spacing-spacious {
+  padding: var(--card-spacing-spacious);
+  padding-bottom: var(--cs-spacing-scale-lg);
+}
+
+/* Card Title */
+.card__title {
+  color: var(--card-text-primary);
+  font-family: inherit;
+  font-size: var(--card-title-font-size);
+  font-weight: var(--card-title-font-weight);
+  line-height: var(--card-title-line-height);
+  letter-spacing: var(--card-title-letter-spacing);
+  margin: 0;
+  padding: 0;
+}
+
+.card__title--size-small {
+  font-size: var(--cs-fonts-display-sizes-xs);
+}
+
+.card__title--size-normal {
+  font-size: var(--card-title-font-size);
+}
+
+.card__title--size-large {
+  font-size: var(--cs-fonts-display-sizes-md);
+}
+
+/* Card Description */
+.card__description {
+  color: var(--card-text-secondary);
+  font-family: inherit;
+  font-size: var(--card-description-font-size);
+  font-weight: var(--card-description-font-weight);
+  line-height: var(--card-description-line-height);
+  letter-spacing: var(--card-description-letter-spacing);
+  margin: 0;
+  padding: 0;
+}
+
+.card__description--size-small {
+  font-size: var(--cs-fonts-body-sizes-xs);
+}
+
+.card__description--size-normal {
+  font-size: var(--card-description-font-size);
+}
+
+/* Card Content */
+.card__content {
+  padding: var(--card-spacing-content);
+  padding-top: 0;
+}
+
+.card__content--spacing-compact {
+  padding: var(--card-spacing-compact);
+  padding-top: 0;
+}
+
+.card__content--spacing-normal {
+  padding: var(--card-spacing-content);
+  padding-top: 0;
+}
+
+.card__content--spacing-spacious {
+  padding: var(--card-spacing-spacious);
+  padding-top: 0;
+}
+
+/* Card Footer */
+.card__footer {
+  align-items: center;
+  display: flex;
+  gap: var(--cs-spacing-scale-md);
+  padding: var(--card-spacing-footer);
+  padding-top: 0;
+}
+
+.card__footer--layout-horizontal {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.card__footer--layout-vertical {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.card__footer--layout-stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.card__footer--layout-justified {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.card__footer--layout-centered {
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* Card Responsive Design */
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .card {
+    padding: var(--card-tablet-padding);
+  }
+  
+  .card__header {
+    padding: var(--card-spacing-header);
+    padding-bottom: var(--cs-spacing-scale-md);
+  }
+  
+  .card__content {
+    padding: var(--card-spacing-content);
+    padding-top: 0;
+  }
+  
+  .card__footer {
+    padding: var(--card-spacing-footer);
+    padding-top: 0;
+  }
+}
+
+@media (min-width: var(--cs-breakpoints-desktop)) {
+  .card {
+    padding: var(--card-desktop-padding);
+  }
+  
+  .card__header {
+    padding: var(--card-spacing-header);
+    padding-bottom: var(--cs-spacing-scale-md);
+  }
+  
+  .card__content {
+    padding: var(--card-spacing-content);
+    padding-top: 0;
+  }
+  
+  .card__footer {
+    padding: var(--card-spacing-footer);
+    padding-top: 0;
+  }
+}
+
+/* Container Queries for Component-Level Responsiveness */
+@container (min-width: var(--card-container-breakpoint-small)) {
+  .card {
+    /* Enhanced layout for wider containers */
+  }
+  
+  .card__footer--layout-horizontal {
+    gap: var(--cs-spacing-scale-lg);
+  }
+}
+
+@container (min-width: var(--card-container-breakpoint-medium)) {
+  .card {
+    /* Full layout for wide containers */
+  }
+  
+  .card__header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+/* Card Focus Management */
+.card:focus-visible {
+  outline: var(--card-focus-ring-width) solid var(--card-focus-ring-color);
+  outline-offset: var(--card-focus-ring-offset);
+  border-radius: var(--card-focus-ring-radius);
+}
+
+/* Card Print Styles */
+@media print {
+  .card {
+    background: transparent !important;
+    border: var(--card-border-width-normal) solid var(--card-print-border-color) !important;
+    box-shadow: none !important;
+    color: var(--card-print-text-color) !important;
+    page-break-inside: avoid;
+  }
+  
+  .card__title {
+    color: var(--card-print-text-color) !important;
+  }
+  
+  .card__description {
+    color: var(--card-print-text-secondary-color) !important;
+  }
+}
+
+/* Card High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .card {
+    border-width: var(--card-high-contrast-border-width);
+    border-color: currentColor;
+  }
+  
+  .card:focus-visible {
+    outline-width: var(--card-high-contrast-outline-width);
+    outline-color: currentColor;
+  }
+}
+
+/* Card Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+  
+  .card--interactive:hover,
+  .card--interactive:focus-visible {
+    transform: none;
+  }
+}
+
+/* Card Dark Mode Specific Styles */
+.dark .card--variant-primary {
+  background-color: rgba(var(--cs-modes-dark-colors-primary-500-rgb), var(--cs-colors-alpha-low));
+}
+
+.dark .card--variant-secondary {
+  background-color: rgba(var(--cs-modes-dark-colors-secondary-500-rgb), var(--cs-colors-alpha-low));
+}
+
+.dark .card--variant-success {
+  background-color: rgba(var(--cs-modes-dark-colors-semantic-success-rgb), var(--cs-colors-alpha-low));
+}
+
+.dark .card--variant-warning {
+  background-color: rgba(var(--cs-modes-dark-colors-semantic-warning-rgb), var(--cs-colors-alpha-low));
+}
+
+.dark .card--variant-error {
+  background-color: rgba(var(--cs-modes-dark-colors-semantic-error-rgb), var(--cs-colors-alpha-low));
+}
+
+/* Card Utility Classes for Layout */
+.card--full-width {
+  width: 100%;
+}
+
+.card--centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card--text-center {
+  text-align: center;
+}
+
+.card--text-left {
+  text-align: left;
+}
+
+.card--text-right {
+  text-align: right;
+}
+
+/* Card Animation Classes */
+.card--animate-in {
+  animation: cardFadeIn var(--card-animation-duration-fast) ease-out;
+}
+
+.card--animate-out {
+  animation: cardFadeOut var(--card-animation-duration-fast) ease-in;
+}
+
+@keyframes cardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(var(--card-animation-offset-y));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cardFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--card-animation-offset-y)));
+  }
+}
+
+/* Card Loading State */
+.card--loading {
+  position: relative;
+  overflow: hidden;
+}
+
+.card--loading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, var(--card-shimmer-alpha)),
+    transparent
+  );
+  animation: cardShimmer var(--card-animation-duration-slow) infinite;
+}
+
+@keyframes cardShimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Card Disabled State */
+.card--disabled {
+  opacity: var(--cs-accessibility-disabled-opacity);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.card--disabled:hover,
+.card--disabled:focus-visible {
+  background-color: var(--card-background);
+  border-color: var(--card-border-color);
+  box-shadow: var(--card-shadow-base);
+  transform: none;
+}