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

package/src/styles/components/navigation/pagination.css

@@ -0,0 +1,635 @@
+/* Pagination Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Pagination Component CSS Variables */
+:root {
+  /* Pagination Base Variables */
+  --pagination-font-size: var(--cs-fonts-primary-sizes-sm);
+  --pagination-font-weight: var(--cs-fonts-primary-weights-medium);
+  --pagination-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --pagination-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+
+  /* Pagination Color Variables */
+  --pagination-color-primary: var(--cs-colors-text-primary);
+  --pagination-color-secondary: var(--cs-colors-text-secondary);
+  --pagination-color-muted: var(--cs-colors-text-muted);
+  --pagination-color-disabled: var(--cs-colors-text-muted);
+  --pagination-color-active: var(--cs-colors-primary-500);
+  --pagination-color-hover: var(--cs-colors-interactive-hover);
+
+  /* Pagination Spacing Variables */
+  --pagination-padding-y: var(--cs-spacing-scale-xs);
+  --pagination-padding-x: var(--cs-spacing-scale-sm);
+  --pagination-margin: var(--cs-spacing-scale-xs);
+  --pagination-item-spacing: var(--cs-spacing-scale-xs);
+  --pagination-group-spacing: var(--cs-spacing-scale-md);
+
+  /* Pagination State Variables */
+  --pagination-transition: var(--cs-transitions-properties-colors);
+  --pagination-border-radius: var(--cs-border-radius-md);
+  --pagination-border-width: var(--cs-border-width-sm);
+  --pagination-shadow: var(--cs-shadows-sm);
+
+  /* Pagination Focus Variables */
+  --pagination-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --pagination-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --pagination-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --pagination-focus-outline-offset: var(--cs-accessibility-outline-offset);
+
+  /* Pagination Icon Variables */
+  --pagination-icon-size: var(--cs-fonts-primary-sizes-md);
+  --pagination-icon-spacing: var(--cs-spacing-scale-xs);
+
+  /* Pagination Size Variables */
+  --pagination-size-sm-padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  --pagination-size-sm-font: var(--cs-fonts-primary-sizes-sm);
+  --pagination-size-md-padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  --pagination-size-md-font: var(--cs-fonts-primary-sizes-sm);
+  --pagination-size-lg-padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-lg);
+  --pagination-size-lg-font: var(--cs-fonts-primary-sizes-base);
+  
+  /* Pagination Interactive State Variables */
+  --pagination-hover-transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+  --pagination-hover-shadow: var(--cs-shadows-md);
+  --pagination-focus-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --pagination-focus-offset: var(--cs-spacing-scale-xs);
+  --pagination-active-transform: translateY(0);
+  --pagination-active-shadow: var(--cs-shadows-sm);
+  --pagination-focus-ring-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --pagination-focus-ring-offset: var(--cs-spacing-scale-xs);
+  
+  /* Pagination High Contrast Variables */
+  --pagination-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  
+  /* Pagination Responsive Variables */
+  --pagination-mobile-font-size: var(--cs-fonts-primary-sizes-xs);
+  --pagination-mobile-padding-y: var(--cs-spacing-scale-xs);
+  --pagination-mobile-padding-x: var(--cs-spacing-scale-sm);
+  --pagination-container-font-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Pagination Showcase Variables */
+  --pagination-showcase-gap: var(--cs-spacing-scale-md);
+  --pagination-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --pagination-variant-section-gap: var(--cs-spacing-scale-sm);
+  --pagination-variant-title-size: var(--cs-fonts-primary-sizes-lg);
+  --pagination-variant-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --pagination-variant-grid-gap: var(--cs-spacing-scale-sm);
+  --pagination-variant-description-size: var(--cs-fonts-primary-sizes-sm);
+  --pagination-variant-description-color: var(--cs-colors-text-muted);
+  --pagination-size-showcase-gap: var(--cs-spacing-scale-md);
+  --pagination-size-description-size: var(--cs-fonts-primary-sizes-sm);
+  --pagination-size-description-color: var(--cs-colors-text-muted);
+  --pagination-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  --pagination-responsive-description-size: var(--cs-fonts-primary-sizes-sm);
+  --pagination-responsive-description-color: var(--cs-colors-text-muted);
+  --pagination-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --pagination-responsive-title-size: var(--cs-fonts-primary-sizes-md);
+  --pagination-responsive-title-weight: var(--cs-fonts-primary-weights-medium);
+  --pagination-responsive-column-gap: var(--cs-spacing-scale-sm);
+}
+
+/* Base Pagination Styles */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pagination-item-spacing);
+  font-family: var(--cs-fonts-primary-family), var(--cs-fonts-primary-fallbacks);
+  font-size: var(--pagination-font-size);
+  font-weight: var(--pagination-font-weight);
+  line-height: var(--pagination-line-height);
+  letter-spacing: var(--pagination-letter-spacing);
+}
+
+/* Pagination Container */
+.pagination__container {
+  display: flex;
+  align-items: center;
+  gap: var(--pagination-item-spacing);
+}
+
+/* Pagination Navigation */
+.pagination__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--pagination-item-spacing);
+}
+
+/* Pagination Item Styles */
+.pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--cs-spacing-scale-2xl);
+  height: var(--cs-spacing-scale-2xl);
+  padding: var(--pagination-padding-y) var(--pagination-padding-x);
+  font-size: var(--pagination-font-size);
+  font-weight: var(--pagination-font-weight);
+  line-height: var(--pagination-line-height);
+  letter-spacing: var(--pagination-letter-spacing);
+  color: var(--pagination-color-primary);
+  text-decoration: none;
+  border: var(--pagination-border-width) solid transparent;
+  border-radius: var(--pagination-border-radius);
+  background: none;
+  cursor: pointer;
+  transition: var(--pagination-transition);
+  position: relative;
+}
+
+.pagination__item:hover {
+  background-color: var(--pagination-color-hover);
+  color: var(--pagination-color-primary);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .pagination__item {
+  color: var(--cs-modes-dark-colors-text-primary);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .pagination__item:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.pagination__item:focus {
+  outline: var(--pagination-focus-ring-width) solid var(--pagination-focus-ring-color);
+  outline-offset: var(--pagination-focus-ring-offset);
+}
+
+.pagination__item:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Pagination Item States */
+.pagination__item--active {
+  color: var(--cs-colors-surface-background);
+  background-color: var(--pagination-color-active);
+  border-color: var(--pagination-color-active);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.pagination__item--disabled {
+  color: var(--pagination-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.pagination__item--disabled:hover {
+  background-color: transparent;
+  color: var(--pagination-color-disabled);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .pagination__item--disabled {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.dark .pagination__item--ellipsis {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Pagination Item Types */
+.pagination__item--page {
+  /* Default page number styling */
+}
+
+.pagination__item--ellipsis {
+  color: var(--pagination-color-muted);
+  cursor: default;
+  min-width: calc(var(--cs-spacing-scale-lg) + var(--cs-spacing-scale-xs));
+}
+
+.pagination__item--ellipsis:hover {
+  background-color: transparent;
+  color: var(--pagination-color-muted);
+}
+
+.pagination__item--previous,
+.pagination__item--next,
+.pagination__item--first,
+.pagination__item--last {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pagination-icon-spacing);
+}
+
+/* Pagination Item Sizes */
+.pagination__item--small {
+  min-width: var(--cs-spacing-scale-xl);
+  height: var(--cs-spacing-scale-xl);
+  padding: var(--pagination-size-sm-padding);
+  font-size: var(--pagination-size-sm-font);
+}
+
+.pagination__item--medium {
+  min-width: var(--cs-spacing-scale-2xl);
+  height: var(--cs-spacing-scale-2xl);
+  padding: var(--pagination-size-md-padding);
+  font-size: var(--pagination-size-md-font);
+}
+
+.pagination__item--large {
+  min-width: var(--cs-spacing-scale-2xl);
+  height: var(--cs-spacing-scale-2xl);
+  padding: var(--pagination-size-lg-padding);
+  font-size: var(--pagination-size-lg-font);
+}
+
+/* Pagination Item Variants */
+.pagination__item--default {
+  color: var(--pagination-color-primary);
+  border-color: var(--cs-colors-border);
+}
+
+.pagination__item--default:hover {
+  background-color: var(--pagination-color-hover);
+  border-color: var(--cs-colors-border);
+}
+
+.pagination__item--outlined {
+  color: var(--pagination-color-primary);
+  border-color: var(--cs-colors-border);
+  background-color: var(--cs-colors-surface-background);
+}
+
+.pagination__item--outlined:hover {
+  background-color: var(--pagination-color-hover);
+  border-color: var(--cs-colors-primary-300);
+}
+
+.pagination__item--outlined.pagination__item--active {
+  color: var(--pagination-color-active);
+  border-color: var(--pagination-color-active);
+  background-color: var(--cs-colors-primary-50);
+}
+
+.pagination__item--minimal {
+  color: var(--pagination-color-primary);
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.pagination__item--minimal:hover {
+  background-color: var(--pagination-color-hover);
+  border-color: transparent;
+}
+
+.pagination__item--minimal.pagination__item--active {
+  color: var(--pagination-color-active);
+  background-color: transparent;
+  border-color: transparent;
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .pagination__item--default {
+  color: var(--cs-modes-dark-colors-text-primary);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .pagination__item--default:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .pagination__item--outlined {
+  color: var(--cs-modes-dark-colors-text-primary);
+  border-color: var(--cs-modes-dark-colors-border);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+}
+
+.dark .pagination__item--outlined:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  border-color: var(--cs-modes-dark-colors-primary-300);
+}
+
+.dark .pagination__item--outlined.pagination__item--active {
+  color: var(--cs-modes-dark-colors-primary-500);
+  border-color: var(--cs-modes-dark-colors-primary-500);
+  background-color: var(--cs-modes-dark-colors-primary-50);
+}
+
+.dark .pagination__item--minimal {
+  color: var(--cs-modes-dark-colors-text-primary);
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.dark .pagination__item--minimal:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  border-color: transparent;
+}
+
+.dark .pagination__item--minimal.pagination__item--active {
+  color: var(--cs-modes-dark-colors-primary-500);
+  background-color: transparent;
+  border-color: transparent;
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+/* Pagination Item Elements */
+.pagination__item-icon {
+  width: var(--pagination-icon-size);
+  height: var(--pagination-icon-size);
+}
+
+.pagination__item-text {
+  white-space: nowrap;
+}
+
+/* Pagination Info */
+.pagination__info {
+  display: flex;
+  align-items: center;
+  gap: var(--pagination-group-spacing);
+  color: var(--pagination-color-muted);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+}
+
+.pagination__total {
+  display: flex;
+  align-items: center;
+  gap: var(--pagination-item-spacing);
+}
+
+.pagination__items-per-page {
+  display: flex;
+  align-items: center;
+  gap: var(--pagination-item-spacing);
+}
+
+.pagination__items-per-page-select {
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  border: var(--pagination-border-width) solid var(--cs-colors-border);
+  border-radius: var(--pagination-border-radius);
+  background-color: var(--cs-colors-surface-background);
+  color: var(--pagination-color-primary);
+  font-size: var(--pagination-font-size);
+  cursor: pointer;
+}
+
+.pagination__items-per-page-select:focus {
+  outline: var(--pagination-focus-ring-width) solid var(--pagination-focus-ring-color);
+  outline-offset: var(--pagination-focus-ring-offset);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .pagination__info {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.dark .pagination__items-per-page-select {
+  border-color: var(--cs-modes-dark-colors-border);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+/* Pagination Responsive Behavior */
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .pagination {
+    flex-direction: column;
+    gap: var(--pagination-group-spacing);
+  }
+  
+  .pagination__nav {
+    order: 1;
+  }
+  
+  .pagination__info {
+    order: 2;
+    flex-direction: column;
+    gap: var(--pagination-item-spacing);
+  }
+  
+  .pagination__item--first,
+  .pagination__item--last {
+    display: none;
+  }
+  
+  .pagination__item--ellipsis {
+    display: none;
+  }
+}
+
+@media (max-width: var(--cs-breakpoints-tablet)) {
+  .pagination__total {
+    display: none;
+  }
+  
+  .pagination__items-per-page {
+    display: none;
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .pagination {
+    font-size: var(--pagination-container-font-size, var(--cs-fonts-primary-sizes-sm));
+  }
+}
+
+/* Pagination Focus Management */
+.pagination__item:focus-visible {
+  outline: var(--pagination-focus-ring-width) solid var(--pagination-focus-ring-color);
+  outline-offset: var(--pagination-focus-ring-offset);
+}
+
+/* Pagination Accessibility */
+.pagination[role="navigation"] {
+  /* Ensure proper navigation role styling */
+}
+
+.pagination__item[aria-current="page"] {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.pagination__item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .pagination__item {
+    border-width: var(--pagination-high-contrast-border-width);
+  }
+  
+  .pagination__items-per-page-select {
+    border-width: var(--pagination-high-contrast-border-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .pagination__item {
+    transition: none;
+  }
+  
+  .pagination__item[tabindex]:hover,
+  .pagination__item[role="button"]:hover,
+  .pagination__item[role="link"]:hover {
+    transform: none;
+  }
+}
+
+/* Pagination Interactive States - Following Gold Standard Pattern */
+.pagination__item[tabindex]:hover,
+.pagination__item[role="button"]:hover,
+.pagination__item[role="link"]:hover {
+  transform: var(--pagination-hover-transform, translateY(calc(-1 * var(--cs-spacing-scale-xs))));
+  box-shadow: var(--pagination-hover-shadow, var(--cs-shadows-md));
+}
+
+.pagination__item[tabindex]:active,
+.pagination__item[role="button"]:active,
+.pagination__item[role="link"]:active {
+  transform: var(--pagination-active-transform, translateY(0));
+  box-shadow: var(--pagination-active-shadow, var(--cs-shadows-sm));
+}
+
+/* Pagination Animation */
+.pagination__item {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.pagination__item:hover {
+  transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+}
+
+.pagination__item:active {
+  transform: translateY(0);
+}
+
+/* Pagination Theme Variants */
+.pagination--semantic .pagination__item--active {
+  background-color: var(--cs-colors-text-primary);
+  color: var(--cs-colors-surface-background);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .pagination--semantic .pagination__item--active {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+/* Storybook Showcase Styles - Following Gold Standard Pattern */
+/* Pagination Showcase Layout */
+.pagination-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pagination-showcase-gap, var(--cs-spacing-scale-md));
+  align-items: center;
+}
+
+/* Pagination Variant Showcase */
+.pagination-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pagination-variant-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.pagination-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pagination-variant-section-gap, var(--cs-spacing-scale-sm));
+}
+
+.pagination-variant-title {
+  font-size: var(--pagination-variant-title-size, var(--cs-fonts-primary-sizes-lg));
+  font-weight: var(--pagination-variant-title-weight, var(--cs-fonts-primary-weights-semibold));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.pagination-variant-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pagination-variant-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.pagination-variant-description {
+  font-size: var(--pagination-variant-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--pagination-variant-description-color, var(--cs-colors-text-muted));
+}
+
+/* Pagination Size Showcase */
+.pagination-size-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pagination-size-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.pagination-size-grid {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.pagination-size-description {
+  font-size: var(--pagination-size-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--pagination-size-description-color, var(--cs-colors-text-muted));
+}
+
+/* Pagination Interactive Showcase */
+.pagination-interactive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.pagination-interactive-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.pagination-interactive-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-muted);
+}
+
+/* Pagination Responsive Showcase */
+.pagination-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pagination-responsive-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.pagination-responsive-description {
+  font-size: var(--pagination-responsive-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--pagination-responsive-description-color, var(--cs-colors-text-muted));
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.pagination-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--pagination-responsive-grid-gap, var(--cs-spacing-scale-md));
+  width: 100%;
+  max-width: var(--cs-spacing-scale-6xl);
+}
+
+.pagination-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pagination-responsive-column-gap, var(--cs-spacing-scale-sm));
+}
+
+.pagination-responsive-title {
+  font-size: var(--pagination-responsive-title-size, var(--cs-fonts-primary-sizes-md));
+  font-weight: var(--pagination-responsive-title-weight, var(--cs-fonts-primary-weights-medium));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+/* Responsive Design for Showcase */
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .pagination-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}