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

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

@@ -0,0 +1,465 @@
+/* Breadcrumb Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Breadcrumb Component CSS Variables */
+:root {
+  /* Breadcrumb Base Variables */
+  --breadcrumb-font-size: var(--cs-fonts-primary-sizes-sm);
+  --breadcrumb-font-weight: var(--cs-fonts-primary-weights-medium);
+  --breadcrumb-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --breadcrumb-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+
+  /* Breadcrumb Color Variables */
+  --breadcrumb-color-primary: var(--cs-colors-text-primary);
+  --breadcrumb-color-secondary: var(--cs-colors-text-secondary);
+  --breadcrumb-color-muted: var(--cs-colors-text-muted);
+  --breadcrumb-color-disabled: var(--cs-colors-text-muted);
+  --breadcrumb-color-active: var(--cs-colors-primary-500);
+  --breadcrumb-color-hover: var(--cs-colors-interactive-hover);
+
+  /* Breadcrumb Spacing Variables */
+  --breadcrumb-padding-y: var(--cs-spacing-scale-xs);
+  --breadcrumb-padding-x: var(--cs-spacing-scale-sm);
+  --breadcrumb-margin: var(--cs-spacing-scale-xs);
+  --breadcrumb-item-spacing: var(--cs-spacing-scale-xs);
+  --breadcrumb-separator-spacing: var(--cs-spacing-scale-sm);
+
+  /* Breadcrumb State Variables */
+  --breadcrumb-transition: var(--cs-transitions-properties-colors);
+  --breadcrumb-border-radius: var(--cs-border-radius-lg);
+  --breadcrumb-border-width: var(--cs-border-width-sm);
+  --breadcrumb-shadow: var(--cs-shadows-sm);
+
+  /* Breadcrumb Focus Variables */
+  --breadcrumb-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --breadcrumb-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --breadcrumb-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --breadcrumb-focus-outline-offset: var(--cs-accessibility-outline-offset);
+
+  /* Breadcrumb Icon Variables */
+  --breadcrumb-icon-size: var(--cs-fonts-primary-sizes-sm);
+  --breadcrumb-icon-spacing: var(--cs-spacing-scale-xs);
+
+  /* Breadcrumb Responsive Variables */
+  --breadcrumb-truncate-width: var(--cs-spacing-scale-4xl);
+  --breadcrumb-responsive-breakpoint: var(--cs-breakpoints-mobile);
+  
+  /* Breadcrumb Interactive State Variables */
+  --breadcrumb-hover-transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+  --breadcrumb-hover-shadow: var(--cs-shadows-md);
+  --breadcrumb-focus-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --breadcrumb-focus-offset: var(--cs-spacing-scale-xs);
+  --breadcrumb-active-transform: translateY(0);
+  --breadcrumb-active-shadow: var(--cs-shadows-sm);
+  --breadcrumb-focus-ring-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --breadcrumb-focus-ring-offset: var(--cs-spacing-scale-xs);
+  
+  /* Breadcrumb High Contrast Variables */
+  --breadcrumb-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  
+  /* Breadcrumb Showcase Variables */
+  --breadcrumb-showcase-gap: var(--cs-spacing-scale-md);
+  --breadcrumb-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --breadcrumb-variant-section-gap: var(--cs-spacing-scale-sm);
+  --breadcrumb-variant-title-size: var(--cs-fonts-primary-sizes-lg);
+  --breadcrumb-variant-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --breadcrumb-variant-grid-gap: var(--cs-spacing-scale-sm);
+  --breadcrumb-variant-description-size: var(--cs-fonts-primary-sizes-sm);
+  --breadcrumb-variant-description-color: var(--cs-colors-text-muted);
+  --breadcrumb-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  --breadcrumb-responsive-description-size: var(--cs-fonts-primary-sizes-sm);
+  --breadcrumb-responsive-description-color: var(--cs-colors-text-muted);
+  --breadcrumb-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --breadcrumb-responsive-title-size: var(--cs-fonts-primary-sizes-md);
+  --breadcrumb-responsive-title-weight: var(--cs-fonts-primary-weights-medium);
+  --breadcrumb-responsive-buttons-gap: var(--cs-spacing-scale-sm);
+  --breadcrumb-responsive-column-gap: var(--cs-spacing-scale-sm);
+}
+
+/* Base Breadcrumb Styles */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-family: var(--cs-fonts-primary-family), var(--cs-fonts-primary-fallbacks);
+  font-size: var(--breadcrumb-font-size);
+  font-weight: var(--breadcrumb-font-weight);
+  line-height: var(--breadcrumb-line-height);
+  letter-spacing: var(--breadcrumb-letter-spacing);
+  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
+  border-radius: var(--breadcrumb-border-radius);
+  transition: var(--breadcrumb-transition);
+  border: var(--breadcrumb-border-width) solid transparent;
+  box-shadow: var(--breadcrumb-shadow);
+}
+
+/* Breadcrumb Theme Variants */
+.breadcrumb--semantic {
+  color: var(--cs-colors-text-secondary);
+  background-color: var(--cs-colors-surface-surface);
+  border-color: var(--cs-colors-border);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb--semantic {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  color: var(--cs-modes-dark-colors-text-secondary);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Breadcrumb Elements */
+.breadcrumb__list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumb__item {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb__item:not(:last-child) {
+  margin-right: var(--breadcrumb-item-spacing);
+}
+
+/* Breadcrumb Item Styles */
+.breadcrumb__item-button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  font-size: var(--breadcrumb-font-size);
+  font-weight: var(--breadcrumb-font-weight);
+  border-radius: var(--cs-border-radius-md);
+  transition: var(--breadcrumb-transition);
+  cursor: pointer;
+  border: var(--breadcrumb-border-width) solid transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+.breadcrumb__item-button:hover {
+  background-color: var(--breadcrumb-color-hover);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__item-button {
+  color: var(--cs-modes-dark-colors-text-secondary);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .breadcrumb__item-button:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+.breadcrumb__item-button:focus {
+  outline: var(--breadcrumb-focus-ring-width) solid var(--breadcrumb-focus-ring-color);
+  outline-offset: var(--breadcrumb-focus-ring-offset);
+}
+
+.breadcrumb__item-button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Breadcrumb Item States */
+.breadcrumb__item-button--active {
+  color: var(--breadcrumb-color-active);
+  background-color: var(--cs-colors-surface-surface);
+  border-color: var(--cs-colors-border);
+}
+
+.breadcrumb__item-button--disabled {
+  color: var(--breadcrumb-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.breadcrumb__item-button--disabled:hover {
+  background-color: transparent;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__item-button--disabled {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Breadcrumb Item Theme Variants */
+.breadcrumb__item-button--semantic.breadcrumb__item-button--active {
+  color: var(--cs-colors-text-primary);
+  background-color: var(--cs-colors-surface-surface);
+  border-color: var(--cs-colors-border);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__item-button--semantic.breadcrumb__item-button--active {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  color: var(--cs-modes-dark-colors-text-primary);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Breadcrumb Separator */
+.breadcrumb__separator {
+  margin: 0 var(--breadcrumb-separator-spacing);
+  color: var(--breadcrumb-color-muted);
+  display: flex;
+  align-items: center;
+}
+
+/* Old theme variants removed - using semantic approach only */
+
+.breadcrumb__separator--semantic {
+  color: var(--cs-colors-text-muted);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__separator--semantic {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Breadcrumb Home Button */
+.breadcrumb__home-button {
+  margin-right: var(--cs-spacing-scale-sm);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__home-button {
+  color: var(--cs-modes-dark-colors-text-secondary);
+}
+
+/* Breadcrumb Icon */
+.breadcrumb__icon {
+  width: var(--breadcrumb-icon-size);
+  height: var(--breadcrumb-icon-size);
+  margin-right: var(--breadcrumb-icon-spacing);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__icon {
+  color: var(--cs-modes-dark-colors-text-secondary);
+}
+
+/* Breadcrumb Ellipsis */
+.breadcrumb__ellipsis {
+  color: var(--breadcrumb-color-muted);
+}
+
+.breadcrumb__ellipsis:hover {
+  color: var(--breadcrumb-color-secondary);
+  background-color: var(--breadcrumb-color-hover);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__ellipsis {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+.dark .breadcrumb__ellipsis:hover {
+  color: var(--cs-modes-dark-colors-text-secondary);
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+/* Breadcrumb Expand Toggle */
+.breadcrumb__expand-toggle {
+  margin-left: var(--cs-spacing-scale-sm);
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  border-radius: var(--cs-border-radius-md);
+  transition: var(--breadcrumb-transition);
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+.breadcrumb__expand-toggle--semantic {
+  color: var(--cs-colors-text-secondary);
+  transition: all var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+.breadcrumb__expand-toggle--semantic:hover {
+  color: var(--cs-colors-text-primary);
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .breadcrumb__expand-toggle--semantic {
+  color: var(--cs-modes-dark-colors-text-secondary);
+}
+
+.dark .breadcrumb__expand-toggle--semantic:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+/* Breadcrumb Responsive Behavior */
+@media (max-width: var(--breadcrumb-responsive-breakpoint)) {
+  .breadcrumb__item-label {
+    max-width: var(--breadcrumb-truncate-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* Breadcrumb Focus Management */
+.breadcrumb__item-button:focus-visible {
+  outline: var(--breadcrumb-focus-ring-width) solid var(--breadcrumb-focus-ring-color);
+  outline-offset: var(--breadcrumb-focus-ring-offset);
+}
+
+/* Breadcrumb Accessibility */
+.breadcrumb[aria-label] {
+  /* Ensure proper labeling for screen readers */
+}
+
+.breadcrumb__item-button[aria-current="page"] {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+/* Storybook Showcase Styles - Following Gold Standard Pattern */
+/* Breadcrumb Showcase Layout */
+.breadcrumb-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--breadcrumb-showcase-gap, var(--cs-spacing-scale-md));
+  align-items: center;
+}
+
+/* Breadcrumb Variant Showcase */
+.breadcrumb-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--breadcrumb-variant-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.breadcrumb-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--breadcrumb-variant-section-gap, var(--cs-spacing-scale-sm));
+}
+
+.breadcrumb-variant-title {
+  font-size: var(--breadcrumb-variant-title-size, var(--cs-fonts-primary-sizes-lg));
+  font-weight: var(--breadcrumb-variant-title-weight, var(--cs-fonts-primary-weights-semibold));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.breadcrumb-variant-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--breadcrumb-variant-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.breadcrumb-variant-description {
+  font-size: var(--breadcrumb-variant-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--breadcrumb-variant-description-color, var(--cs-colors-text-muted));
+}
+
+/* Breadcrumb Responsive Showcase */
+.breadcrumb-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--breadcrumb-responsive-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.breadcrumb-responsive-description {
+  font-size: var(--breadcrumb-responsive-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--breadcrumb-responsive-description-color, var(--cs-colors-text-muted));
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.breadcrumb-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--breadcrumb-responsive-grid-gap, var(--cs-spacing-scale-md));
+  width: 100%;
+  max-width: var(--cs-spacing-scale-6xl);
+}
+
+.breadcrumb-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--breadcrumb-responsive-column-gap, var(--cs-spacing-scale-sm));
+}
+
+.breadcrumb-responsive-title {
+  font-size: var(--breadcrumb-responsive-title-size, var(--cs-fonts-primary-sizes-md));
+  font-weight: var(--breadcrumb-responsive-title-weight, var(--cs-fonts-primary-weights-medium));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.breadcrumb-responsive-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--breadcrumb-responsive-buttons-gap, var(--cs-spacing-scale-sm));
+  width: 100%;
+}
+
+/* Responsive Design for Showcase */
+@media (min-width: 768px) {
+  .breadcrumb-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .breadcrumb {
+    font-size: var(--cs-fonts-primary-sizes-base);
+  }
+}
+
+/* Breadcrumb Interactive States - Using Gold Standard Pattern */
+.breadcrumb__item-button[tabindex]:hover,
+.breadcrumb__item-button[role="button"]:hover,
+.breadcrumb__item-button[role="link"]:hover {
+  transform: var(--breadcrumb-hover-transform, translateY(calc(-1 * var(--cs-spacing-scale-xs))));
+  box-shadow: var(--breadcrumb-hover-shadow, var(--cs-shadows-md));
+}
+
+.breadcrumb__item-button[tabindex]:focus,
+.breadcrumb__item-button[role="button"]:focus,
+.breadcrumb__item-button[role="link"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--cs-spacing-scale-xs) var(--cs-colors-interactive-focus), 0 0 0 var(--cs-spacing-scale-sm) var(--cs-colors-text-inverse);
+}
+
+.breadcrumb__item-button[tabindex]:active,
+.breadcrumb__item-button[role="button"]:active,
+.breadcrumb__item-button[role="link"]:active {
+  transform: var(--breadcrumb-active-transform, translateY(0));
+  box-shadow: var(--breadcrumb-active-shadow, var(--cs-shadows-sm));
+}
+
+/* Focus Ring for Accessibility */
+.breadcrumb__item-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--cs-spacing-scale-xs) var(--cs-colors-interactive-focus), 0 0 0 var(--cs-spacing-scale-sm) var(--cs-colors-text-inverse);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .breadcrumb {
+    border-width: var(--breadcrumb-high-contrast-border-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .breadcrumb__item-button {
+    transition: none;
+  }
+  
+  .breadcrumb__item-button[tabindex]:hover,
+  .breadcrumb__item-button[role="button"]:hover,
+  .breadcrumb__item-button[role="link"]:hover {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,9 @@
+/* Navigation Components */
+/* Components for application navigation and wayfinding */
+
+@import './breadcrumb.css';
+@import './menu.css';
+@import './pagination.css';
+@import './sidebar.css';
+@import './stepper.css';
+@import './tabs.css';