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

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

@@ -0,0 +1,572 @@
+/* Menu Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Menu Component CSS Variables */
+:root {
+  /* Menu Base Variables */
+  --menu-font-size: var(--cs-fonts-primary-sizes-sm);
+  --menu-font-weight: var(--cs-fonts-primary-weights-medium);
+  --menu-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --menu-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+
+  /* Menu Color Variables */
+  --menu-color-primary: var(--cs-colors-text-primary);
+  --menu-color-secondary: var(--cs-colors-text-secondary);
+  --menu-color-muted: var(--cs-colors-text-muted);
+  --menu-color-disabled: var(--cs-colors-text-muted);
+  --menu-color-active: var(--cs-colors-primary-500);
+  --menu-color-hover: var(--cs-colors-interactive-hover);
+
+  /* Menu Spacing Variables */
+  --menu-padding-y: var(--cs-spacing-scale-xs);
+  --menu-padding-x: var(--cs-spacing-scale-sm);
+  --menu-margin: var(--cs-spacing-scale-xs);
+  --menu-item-spacing: var(--cs-spacing-scale-xs);
+  --menu-group-spacing: var(--cs-spacing-scale-md);
+
+  /* Menu State Variables */
+  --menu-transition: var(--cs-transitions-properties-colors);
+  --menu-border-radius: var(--cs-border-radius-lg);
+  --menu-border-width: var(--cs-border-width-sm);
+  --menu-shadow: var(--cs-shadows-lg);
+
+  /* Menu Focus Variables */
+  --menu-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --menu-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --menu-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --menu-focus-outline-offset: var(--cs-accessibility-outline-offset);
+
+  /* Menu Icon Variables */
+  --menu-icon-size: var(--cs-fonts-primary-sizes-sm);
+  --menu-icon-spacing: var(--cs-spacing-scale-sm);
+  --menu-badge-spacing: var(--cs-spacing-scale-sm);
+
+  /* Menu Dropdown Variables */
+  --menu-dropdown-min-width: var(--cs-spacing-scale-3xl);
+  --menu-dropdown-max-width: var(--cs-spacing-scale-5xl);
+  --menu-dropdown-z-index: 1000;
+
+  /* Menu Animation Variables */
+  --menu-arrow-size: var(--cs-spacing-scale-xs);
+  --menu-arrow-border-width: var(--cs-border-width-focus);
+  --menu-hover-offset: var(--cs-spacing-scale-xs);
+  --menu-slide-offset: var(--cs-spacing-scale-sm);
+  
+  /* Menu Interactive State Variables */
+  --menu-hover-transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+  --menu-hover-shadow: var(--cs-shadows-md);
+  --menu-focus-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --menu-focus-offset: var(--cs-spacing-scale-xs);
+  --menu-active-transform: translateY(0);
+  --menu-active-shadow: var(--cs-shadows-sm);
+  --menu-focus-ring-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --menu-focus-ring-offset: var(--cs-spacing-scale-xs);
+  
+  /* Menu High Contrast Variables */
+  --menu-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  
+  /* Menu Responsive Variables */
+  --menu-mobile-font-size: var(--cs-fonts-primary-sizes-xs);
+  --menu-mobile-padding-y: var(--cs-spacing-scale-xs);
+  --menu-mobile-padding-x: var(--cs-spacing-scale-sm);
+  --menu-container-font-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Menu Showcase Variables */
+  --menu-showcase-gap: var(--cs-spacing-scale-md);
+  --menu-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --menu-variant-section-gap: var(--cs-spacing-scale-sm);
+  --menu-variant-title-size: var(--cs-fonts-primary-sizes-lg);
+  --menu-variant-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --menu-variant-grid-gap: var(--cs-spacing-scale-sm);
+  --menu-variant-description-size: var(--cs-fonts-primary-sizes-sm);
+  --menu-variant-description-color: var(--cs-colors-text-muted);
+  --menu-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  --menu-responsive-description-size: var(--cs-fonts-primary-sizes-sm);
+  --menu-responsive-description-color: var(--cs-colors-text-muted);
+  --menu-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --menu-responsive-title-size: var(--cs-fonts-primary-sizes-md);
+  --menu-responsive-title-weight: var(--cs-fonts-primary-weights-medium);
+  --menu-responsive-column-gap: var(--cs-spacing-scale-sm);
+}
+
+/* Base Menu Styles */
+.menu {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--menu-border-radius);
+  border: var(--menu-border-width) solid transparent;
+  box-shadow: var(--menu-shadow);
+  background-color: var(--cs-colors-surface-background);
+  transition: var(--menu-transition);
+  min-width: var(--menu-dropdown-min-width);
+  max-width: var(--menu-dropdown-max-width);
+  z-index: var(--menu-dropdown-z-index);
+}
+
+/* Menu Theme Variants */
+.menu--semantic {
+  background-color: var(--cs-colors-surface-background);
+  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 .menu--semantic {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Menu Header */
+.menu__header {
+  padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  border-bottom: var(--menu-border-width) solid var(--cs-colors-border);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--menu-color-primary);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__header {
+  border-bottom-color: var(--cs-modes-dark-colors-border);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+/* Menu Group */
+.menu__group {
+  padding: var(--menu-group-spacing) 0;
+}
+
+.menu__group:not(:last-child) {
+  border-bottom: var(--menu-border-width) solid var(--cs-colors-border);
+}
+
+.menu__group-title {
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-md);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--menu-color-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--cs-fonts-primary-letter-spacing-wide);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__group {
+  border-bottom-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .menu__group-title {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Menu Item Styles */
+.menu__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--menu-padding-y) var(--menu-padding-x);
+  font-size: var(--menu-font-size);
+  font-weight: var(--menu-font-weight);
+  line-height: var(--menu-line-height);
+  letter-spacing: var(--menu-letter-spacing);
+  color: var(--menu-color-primary);
+  text-decoration: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: var(--menu-transition);
+  text-align: left;
+}
+
+.menu__item:hover {
+  background-color: var(--menu-color-hover);
+  color: var(--menu-color-primary);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__item {
+  color: var(--cs-modes-dark-colors-text-primary);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+}
+
+.dark .menu__item:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+  color: var(--cs-modes-dark-colors-text-primary);
+}
+
+.menu__item:focus {
+  outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring-color);
+  outline-offset: var(--menu-focus-ring-offset);
+}
+
+.menu__item:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.menu__item--active {
+  background-color: var(--menu-color-active);
+  color: var(--cs-colors-surface-background);
+}
+
+.menu__item--disabled {
+  color: var(--menu-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.menu__item--disabled:hover {
+  background-color: transparent;
+  color: var(--menu-color-disabled);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__item--active {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  color: var(--cs-modes-dark-colors-text-inverse);
+}
+
+.dark .menu__item--disabled {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Menu Item Elements */
+.menu__item-icon {
+  width: var(--menu-icon-size);
+  height: var(--menu-icon-size);
+  margin-right: var(--menu-icon-spacing);
+  flex-shrink: 0;
+}
+
+.menu__item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu__item-badge {
+  margin-left: var(--menu-badge-spacing);
+  flex-shrink: 0;
+}
+
+.menu__item-description {
+  display: block;
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--menu-color-muted);
+  margin-top: var(--cs-spacing-scale-xs);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__item-description {
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Menu Item with Children */
+.menu__item--has-children {
+  position: relative;
+}
+
+.menu__item--has-children::after {
+  content: '';
+  width: var(--menu-arrow-size);
+  height: var(--menu-arrow-size);
+  border-right: var(--menu-arrow-border-width) solid currentColor;
+  border-bottom: var(--menu-arrow-border-width) solid currentColor;
+  transform: rotate(-45deg);
+  margin-left: auto;
+  transition: var(--menu-transition);
+}
+
+.menu__item--has-children:hover::after {
+  transform: rotate(-45deg) translateY(calc(-1 * var(--menu-hover-offset)));
+}
+
+/* Menu Submenu */
+.menu__submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  min-width: var(--menu-dropdown-min-width);
+  max-width: var(--menu-dropdown-max-width);
+  background-color: var(--cs-colors-surface-background);
+  border: var(--menu-border-width) solid var(--cs-colors-border);
+  border-radius: var(--menu-border-radius);
+  box-shadow: var(--menu-shadow);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(calc(-1 * var(--menu-slide-offset)));
+  transition: var(--menu-transition);
+  z-index: calc(var(--menu-dropdown-z-index) + 1);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__submenu {
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.menu__item--has-children:hover .menu__submenu,
+.menu__item--has-children:focus-within .menu__submenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+/* Menu Divider */
+.menu__divider {
+  height: var(--menu-border-width);
+  background-color: var(--cs-colors-border);
+  margin: var(--cs-spacing-scale-xs) 0;
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__divider {
+  background-color: var(--cs-modes-dark-colors-border);
+}
+
+/* Menu Footer */
+.menu__footer {
+  padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  border-top: var(--menu-border-width) solid var(--cs-colors-border);
+  background-color: var(--cs-colors-surface-surface);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  color: var(--menu-color-muted);
+}
+
+/* Dark mode automatically handled by CSS variables */
+.dark .menu__footer {
+  border-top-color: var(--cs-modes-dark-colors-border);
+  background-color: var(--cs-modes-dark-colors-surface-surface);
+  color: var(--cs-modes-dark-colors-text-muted);
+}
+
+/* Menu Responsive Behavior */
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .menu {
+    min-width: 100%;
+    max-width: 100%;
+    font-size: var(--menu-mobile-font-size, var(--cs-fonts-primary-sizes-xs));
+    padding: var(--menu-mobile-padding-y, var(--cs-spacing-scale-xs)) var(--menu-mobile-padding-x, var(--cs-spacing-scale-sm));
+  }
+  
+  .menu__submenu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    box-shadow: none;
+    border: none;
+    border-left: var(--menu-border-width) solid var(--cs-colors-border);
+    margin-left: var(--cs-spacing-scale-md);
+  }
+  
+  .menu__item--has-children::after {
+    transform: rotate(45deg);
+  }
+  
+  .menu__item--has-children:hover::after {
+    transform: rotate(45deg) translateY(var(--menu-hover-offset));
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .menu {
+    font-size: var(--menu-container-font-size, var(--cs-fonts-primary-sizes-sm));
+  }
+}
+
+/* Menu Focus Management */
+.menu__item:focus-visible {
+  outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring-color);
+  outline-offset: var(--menu-focus-ring-offset);
+}
+
+/* Menu Accessibility */
+.menu[role="menu"] {
+  /* Ensure proper menu role styling */
+}
+
+.menu__item[role="menuitem"] {
+  /* Ensure proper menuitem role styling */
+}
+
+.menu__item[aria-expanded="true"]::after {
+  transform: rotate(45deg);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .menu {
+    border-width: var(--menu-high-contrast-border-width);
+  }
+  
+  .menu__submenu {
+    border-width: var(--menu-high-contrast-border-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .menu__item {
+    transition: none;
+  }
+  
+  .menu__item[tabindex]:hover,
+  .menu__item[role="button"]:hover,
+  .menu__item[role="link"]:hover {
+    transform: none;
+  }
+  
+  .menu__submenu {
+    transition: none;
+    animation: none;
+  }
+}
+
+/* Menu Interactive States - Following Gold Standard Pattern */
+.menu__item[tabindex]:hover,
+.menu__item[role="button"]:hover,
+.menu__item[role="link"]:hover {
+  transform: var(--menu-hover-transform, translateY(calc(-1 * var(--cs-spacing-scale-xs))));
+  box-shadow: var(--menu-hover-shadow, var(--cs-shadows-md));
+}
+
+.menu__item[tabindex]:active,
+.menu__item[role="button"]:active,
+.menu__item[role="link"]:active {
+  transform: var(--menu-active-transform, translateY(0));
+  box-shadow: var(--menu-active-shadow, var(--cs-shadows-sm));
+}
+
+/* Menu Animation */
+.menu__item {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.menu__item:hover {
+  transform: translateX(var(--menu-hover-offset));
+}
+
+.menu__item:active {
+  transform: translateX(0);
+}
+
+/* Menu Dropdown Animation */
+.menu__submenu {
+  transform-origin: left top;
+}
+
+.menu__item--has-children:hover .menu__submenu,
+.menu__item--has-children:focus-within .menu__submenu {
+  animation: menuSlideIn 0.2s ease-out;
+}
+
+@keyframes menuSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--menu-slide-offset)));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Storybook Showcase Styles - Following Gold Standard Pattern */
+/* Menu Showcase Layout */
+.menu-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--menu-showcase-gap, var(--cs-spacing-scale-md));
+  align-items: center;
+}
+
+/* Menu Variant Showcase */
+.menu-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-variant-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.menu-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-variant-section-gap, var(--cs-spacing-scale-sm));
+}
+
+.menu-variant-title {
+  font-size: var(--menu-variant-title-size, var(--cs-fonts-primary-sizes-lg));
+  font-weight: var(--menu-variant-title-weight, var(--cs-fonts-primary-weights-semibold));
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.menu-variant-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--menu-variant-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.menu-variant-description {
+  font-size: var(--menu-variant-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--menu-variant-description-color, var(--cs-colors-text-muted));
+}
+
+/* Menu Interactive Showcase */
+.menu-interactive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+}
+
+.menu-interactive-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.menu-interactive-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-muted);
+}
+
+/* Menu Responsive Showcase */
+.menu-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-responsive-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.menu-responsive-description {
+  font-size: var(--menu-responsive-description-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--menu-responsive-description-color, var(--cs-colors-text-muted));
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.menu-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--menu-responsive-grid-gap, var(--cs-spacing-scale-md));
+  width: 100%;
+  max-width: var(--cs-spacing-scale-6xl);
+}
+
+.menu-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-responsive-column-gap, var(--cs-spacing-scale-sm));
+}
+
+.menu-responsive-title {
+  font-size: var(--menu-responsive-title-size, var(--cs-fonts-primary-sizes-md));
+  font-weight: var(--menu-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: 768px) {
+  .menu-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}