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

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

@@ -0,0 +1,404 @@
+/* Tabs Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Tabs Component CSS Variables */
+:root {
+  /* Tabs Base Variables */
+  --tabs-font-size: var(--cs-fonts-primary-sizes-sm);
+  --tabs-font-weight: var(--cs-fonts-primary-weights-medium);
+  --tabs-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --tabs-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+
+  /* Tabs Color Variables */
+  --tabs-color-primary: var(--cs-colors-text-primary);
+  --tabs-color-secondary: var(--cs-colors-text-secondary);
+  --tabs-color-muted: var(--cs-colors-text-muted);
+  --tabs-color-disabled: var(--cs-colors-text-muted);
+  --tabs-color-active: var(--cs-colors-primary-500);
+  --tabs-color-hover: var(--cs-colors-interactive-hover);
+
+  /* Tabs Spacing Variables */
+  --tabs-padding-y: var(--cs-spacing-scale-xs);
+  --tabs-padding-x: var(--cs-spacing-scale-sm);
+  --tabs-margin: var(--cs-spacing-scale-xs);
+  --tabs-item-spacing: var(--cs-spacing-scale-xs);
+  --tabs-content-spacing: var(--cs-spacing-scale-md);
+
+  /* Tabs State Variables */
+  --tabs-transition: var(--cs-transitions-properties-colors);
+  --tabs-border-radius: var(--cs-border-radius-lg);
+  --tabs-border-width: var(--cs-border-width-sm);
+  --tabs-shadow: var(--cs-shadows-sm);
+
+  /* Tabs Focus Variables */
+  --tabs-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --tabs-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --tabs-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --tabs-focus-outline-offset: var(--cs-accessibility-outline-offset);
+
+  /* Tabs Icon Variables */
+  --tabs-icon-size: var(--cs-fonts-primary-sizes-md);
+  --tabs-icon-spacing: var(--cs-spacing-scale-sm);
+  --tabs-badge-spacing: var(--cs-spacing-scale-sm);
+
+  /* Tabs Size Variables */
+  --tabs-size-sm-padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  --tabs-size-sm-font: var(--cs-fonts-primary-sizes-sm);
+  --tabs-size-md-padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  --tabs-size-md-font: var(--cs-fonts-primary-sizes-sm);
+  --tabs-size-lg-padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-lg);
+  --tabs-size-lg-font: var(--cs-fonts-primary-sizes-base);
+}
+
+/* Base Tabs Styles */
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs--vertical {
+  flex-direction: row;
+}
+
+/* Tabs List Container */
+.tabs__list {
+  display: flex;
+  border-radius: var(--tabs-border-radius);
+  border: var(--tabs-border-width) solid transparent;
+  box-shadow: var(--tabs-shadow);
+  transition: var(--tabs-transition);
+}
+
+.tabs__list--vertical {
+  flex-direction: column;
+  border-right: var(--tabs-border-width) solid transparent;
+}
+
+.tabs__list--full-width {
+  width: 100%;
+}
+
+.tabs__list--centered {
+  justify-content: center;
+}
+
+/* Tabs List Theme Variants */
+.tabs__list--semantic {
+  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 .tabs__list--semantic {
+  /* CSS variables automatically switch to dark mode values */
+}
+
+/* Tabs Item Styles */
+.tabs__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tabs-font-size);
+  font-weight: var(--tabs-font-weight);
+  line-height: var(--tabs-line-height);
+  letter-spacing: var(--tabs-letter-spacing);
+  padding: var(--tabs-padding-y) var(--tabs-padding-x);
+  border-radius: var(--cs-border-radius-md);
+  transition: var(--tabs-transition);
+  cursor: pointer;
+  border: var(--tabs-border-width) solid transparent;
+  text-decoration: none;
+  color: inherit;
+  background: none;
+  position: relative;
+}
+
+.tabs__item--vertical {
+  width: 100%;
+  justify-content: flex-start;
+  border-right: var(--tabs-border-width) solid transparent;
+}
+
+.tabs__item--full-width {
+  flex: 1;
+}
+
+/* Tabs Item Sizes */
+.tabs__item--small {
+  padding: var(--tabs-size-sm-padding);
+  font-size: var(--tabs-size-sm-font);
+}
+
+.tabs__item--medium {
+  padding: var(--tabs-size-md-padding);
+  font-size: var(--tabs-size-md-font);
+}
+
+.tabs__item--large {
+  padding: var(--tabs-size-lg-padding);
+  font-size: var(--tabs-size-lg-font);
+}
+
+/* Tabs Item States */
+.tabs__item:hover {
+  background-color: var(--tabs-color-hover);
+}
+
+.tabs__item:focus {
+  outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);
+  outline-offset: var(--tabs-focus-ring-offset);
+}
+
+.tabs__item:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.tabs__item--disabled {
+  color: var(--tabs-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--cs-accessibility-disabled-opacity);
+}
+
+.tabs__item--disabled:hover {
+  background-color: transparent;
+}
+
+/* Tabs Item Variants */
+.tabs__item--default {
+  color: var(--tabs-color-secondary);
+}
+
+.tabs__item--default:hover {
+  color: var(--tabs-color-primary);
+  background-color: var(--tabs-color-hover);
+}
+
+.tabs__item--default.tabs__item--active {
+  color: var(--cs-colors-surface-background);
+  background-color: var(--tabs-color-active);
+  box-shadow: var(--cs-shadows-md);
+}
+
+.tabs__item--pills {
+  color: var(--tabs-color-secondary);
+}
+
+.tabs__item--pills:hover {
+  color: var(--tabs-color-primary);
+  background-color: var(--tabs-color-hover);
+}
+
+.tabs__item--pills.tabs__item--active {
+  color: var(--cs-colors-surface-background);
+  background-color: var(--tabs-color-active);
+  box-shadow: var(--cs-shadows-md);
+}
+
+.tabs__item--underline {
+  color: var(--tabs-color-secondary);
+  border-bottom: var(--tabs-border-width) solid transparent;
+}
+
+.tabs__item--underline:hover {
+  color: var(--tabs-color-primary);
+  border-bottom-color: var(--cs-colors-border);
+}
+
+.tabs__item--underline.tabs__item--active {
+  color: var(--tabs-color-active);
+  border-bottom-color: var(--tabs-color-active);
+}
+
+.tabs__item--cards {
+  color: var(--tabs-color-secondary);
+  border: var(--tabs-border-width) solid transparent;
+}
+
+.tabs__item--cards:hover {
+  color: var(--tabs-color-primary);
+  background-color: var(--tabs-color-hover);
+  border-color: var(--cs-colors-border);
+}
+
+.tabs__item--cards.tabs__item--active {
+  color: var(--tabs-color-active);
+  background-color: var(--cs-colors-primary-50);
+  border-color: var(--cs-colors-primary-200);
+  box-shadow: var(--cs-shadows-sm);
+}
+
+.tabs__item--minimal {
+  color: var(--tabs-color-secondary);
+}
+
+.tabs__item--minimal:hover {
+  color: var(--tabs-color-primary);
+}
+
+.tabs__item--minimal.tabs__item--active {
+  color: var(--tabs-color-active);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+/* Tabs Item Theme Variants */
+.tabs__item--stan-design.tabs__item--active {
+  background-color: var(--cs-colors-text-primary);
+  color: var(--cs-colors-surface-background);
+}
+
+.tabs__item--enterprise.tabs__item--active {
+  background-color: var(--cs-colors-primary-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.tabs__item--harvey.tabs__item--active {
+  background-color: var(--cs-colors-accent);
+  color: var(--cs-colors-surface-background);
+}
+
+/* Tabs Item Elements */
+.tabs__item-icon {
+  width: var(--tabs-icon-size);
+  height: var(--tabs-icon-size);
+  margin-right: var(--tabs-icon-spacing);
+}
+
+.tabs__item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tabs__item-badge {
+  margin-left: var(--tabs-badge-spacing);
+}
+
+/* Tabs Close Button */
+.tabs__close-button {
+  margin-left: var(--tabs-icon-spacing);
+  padding: var(--cs-spacing-scale-xs);
+  border-radius: var(--cs-border-radius-full);
+  transition: var(--tabs-transition);
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tabs__close-button:hover {
+  background-color: rgba(0, 0, 0, var(--cs-colors-alpha-low));
+}
+
+.tabs__close-icon {
+  width: calc(var(--cs-spacing-scale-sm) + var(--cs-spacing-scale-xs));
+  height: calc(var(--cs-spacing-scale-sm) + var(--cs-spacing-scale-xs));
+}
+
+/* Tabs Add Button */
+.tabs__add-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tabs-padding-y) var(--tabs-padding-x);
+  color: var(--tabs-color-muted);
+  transition: var(--tabs-transition);
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-radius: var(--cs-border-radius-md);
+}
+
+.tabs__add-button:hover {
+  color: var(--tabs-color-secondary);
+  background-color: var(--tabs-color-hover);
+}
+
+.tabs__add-icon {
+  width: var(--tabs-icon-size);
+  height: var(--tabs-icon-size);
+}
+
+/* Tabs Content Area */
+.tabs__content {
+  margin-top: var(--tabs-content-spacing);
+}
+
+.tabs__content--vertical {
+  margin-top: 0;
+  margin-left: var(--tabs-content-spacing);
+  flex: 1;
+}
+
+/* Tabs Loading State */
+.tabs__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cs-spacing-scale-2xl);
+}
+
+.tabs__loading-spinner {
+  width: var(--cs-spacing-scale-2xl);
+  height: var(--cs-spacing-scale-2xl);
+  border: var(--tabs-border-width) solid var(--cs-colors-border);
+  border-top-color: var(--tabs-color-active);
+  border-radius: var(--cs-border-radius-full);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Tabs Focus Management */
+.tabs__item:focus-visible {
+  outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);
+  outline-offset: var(--tabs-focus-ring-offset);
+}
+
+/* Tabs Accessibility */
+.tabs__item[aria-selected="true"] {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.tabs__item[role="tab"] {
+  /* Ensure proper tab role styling */
+}
+
+/* Tabs Animation */
+.tabs__item {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.tabs__item:hover {
+  transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+}
+
+.tabs__item:active {
+  transform: translateY(0);
+}
+
+/* Tabs Responsive Behavior */
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .tabs__list--vertical {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+  
+  .tabs__item--vertical {
+    width: auto;
+    min-width: max-content;
+  }
+  
+  .tabs__content--vertical {
+    margin-left: var(--cs-spacing-scale-none);
+    margin-top: var(--tabs-content-spacing);
+  }
+}

package/src/styles/components/overlay/backdrop.css

@@ -0,0 +1,243 @@
+/* Backdrop Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* BACKDROP BASE */
+/* ============================================================================ */
+
+.backdrop {
+  --backdrop-opacity: 0.5;
+  --backdrop-z-index: var(--cs-z-index-backdrop, 1000);
+  --backdrop-transition: var(--cs-transitions-all, all 200ms ease-in-out);
+  --backdrop-blur: 4px;
+  --backdrop-color: rgba(0, 0, 0, var(--backdrop-opacity));
+}
+
+.backdrop__container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--backdrop-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--backdrop-color);
+  transition: var(--backdrop-transition);
+  cursor: pointer;
+}
+
+/* ============================================================================ */
+/* BACKDROP VARIANTS */
+/* ============================================================================ */
+
+.backdrop__container--blur {
+  backdrop-filter: blur(var(--backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--backdrop-blur));
+}
+
+.backdrop__container--light {
+  --backdrop-color: rgba(255, 255, 255, var(--backdrop-opacity));
+}
+
+.backdrop__container--dark {
+  --backdrop-color: rgba(0, 0, 0, var(--backdrop-opacity));
+}
+
+/* ============================================================================ */
+/* BACKDROP OPACITY VARIANTS */
+/* ============================================================================ */
+
+.backdrop__container--opacity-10 {
+  --backdrop-opacity: 0.1;
+}
+
+.backdrop__container--opacity-20 {
+  --backdrop-opacity: 0.2;
+}
+
+.backdrop__container--opacity-30 {
+  --backdrop-opacity: 0.3;
+}
+
+.backdrop__container--opacity-40 {
+  --backdrop-opacity: 0.4;
+}
+
+.backdrop__container--opacity-50 {
+  --backdrop-opacity: 0.5;
+}
+
+.backdrop__container--opacity-60 {
+  --backdrop-opacity: 0.6;
+}
+
+.backdrop__container--opacity-70 {
+  --backdrop-opacity: 0.7;
+}
+
+.backdrop__container--opacity-80 {
+  --backdrop-opacity: 0.8;
+}
+
+.backdrop__container--opacity-90 {
+  --backdrop-opacity: 0.9;
+}
+
+/* ============================================================================ */
+/* BACKDROP Z-INDEX MANAGEMENT */
+/* ============================================================================ */
+
+.backdrop__container--z-modal {
+  --backdrop-z-index: var(--cs-z-index-modal, 1000);
+}
+
+.backdrop__container--z-dropdown {
+  --backdrop-z-index: var(--cs-z-index-dropdown, 1010);
+}
+
+.backdrop__container--z-popover {
+  --backdrop-z-index: var(--cs-z-index-popover, 1020);
+}
+
+.backdrop__container--z-tooltip {
+  --backdrop-z-index: var(--cs-z-index-tooltip, 1030);
+}
+
+.backdrop__container--z-toast {
+  --backdrop-z-index: var(--cs-z-index-toast, 1040);
+}
+
+/* ============================================================================ */
+/* BACKDROP ANIMATIONS */
+/* ============================================================================ */
+
+.backdrop__container--enter {
+  animation: backdrop-fade-in 200ms ease-out;
+}
+
+.backdrop__container--exit {
+  animation: backdrop-fade-out 200ms ease-in;
+}
+
+@keyframes backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes backdrop-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ============================================================================ */
+/* BACKDROP CONTENT */
+/* ============================================================================ */
+
+.backdrop__content {
+  pointer-events: auto;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  cursor: default;
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .backdrop__container {
+    padding: var(--cs-spacing-scale-4, 16px);
+  }
+
+  .backdrop__content {
+    width: 100%;
+    height: auto;
+    max-height: calc(100vh - var(--cs-spacing-scale-8, 32px));
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.backdrop__container[role="presentation"] {
+  /* Ensure backdrop is properly announced to screen readers */
+}
+
+.backdrop__container:focus {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .backdrop__container {
+    border: 1px solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .backdrop__container {
+    transition: none;
+  }
+
+  .backdrop__container--enter,
+  .backdrop__container--exit {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* INTERACTION STATES */
+/* ============================================================================ */
+
+.backdrop__container--no-click {
+  pointer-events: none;
+}
+
+.backdrop__container--no-click .backdrop__content {
+  pointer-events: auto;
+}
+
+.backdrop__container:hover {
+  /* Optional hover effects can be added here */
+}
+
+/* ============================================================================ */
+/* THEME INTEGRATION */
+/* ============================================================================ */
+
+.backdrop__container--theme-light {
+  --backdrop-color: rgba(255, 255, 255, var(--backdrop-opacity));
+}
+
+.backdrop__container--theme-dark {
+  --backdrop-color: rgba(0, 0, 0, var(--backdrop-opacity));
+}
+
+.backdrop__container--theme-primary {
+  --backdrop-color: rgba(59, 130, 246, var(--backdrop-opacity)); /* Primary blue */
+}
+
+.backdrop__container--theme-success {
+  --backdrop-color: rgba(16, 185, 129, var(--backdrop-opacity)); /* Success green */
+}
+
+.backdrop__container--theme-warning {
+  --backdrop-color: rgba(245, 158, 11, var(--backdrop-opacity)); /* Warning amber */
+}
+
+.backdrop__container--theme-error {
+  --backdrop-color: rgba(239, 68, 68, var(--backdrop-opacity)); /* Error red */
+}

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

@@ -0,0 +1,8 @@
+/* Overlay Components */
+/* Components that render above other content (modals, tooltips, etc.) */
+
+@import './backdrop.css';
+@import './modal.css';
+@import './popover.css';
+@import './portal.css';
+@import './tooltip.css';