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

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

@@ -0,0 +1,213 @@
+/* Portal Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* PORTAL BASE */
+/* ============================================================================ */
+
+.portal {
+  /* Portal is a container for rendering content outside the DOM hierarchy */
+  /* It typically doesn't need visual styling, but we define it for consistency */
+}
+
+.portal__container {
+  position: relative;
+  z-index: var(--cs-z-index-portal, 1000);
+}
+
+/* ============================================================================ */
+/* PORTAL VARIANTS */
+/* ============================================================================ */
+
+.portal__container--modal {
+  z-index: var(--cs-z-index-modal, 1000);
+}
+
+.portal__container--popover {
+  z-index: var(--cs-z-index-popover, 1020);
+}
+
+.portal__container--tooltip {
+  z-index: var(--cs-z-index-tooltip, 1030);
+}
+
+.portal__container--toast {
+  z-index: var(--cs-z-index-toast, 1040);
+}
+
+.portal__container--dropdown {
+  z-index: var(--cs-z-index-dropdown, 1010);
+}
+
+/* ============================================================================ */
+/* PORTAL POSITIONING */
+/* ============================================================================ */
+
+.portal__container--fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.portal__container--absolute {
+  position: absolute;
+}
+
+.portal__container--relative {
+  position: relative;
+}
+
+/* ============================================================================ */
+/* PORTAL CONTENT */
+/* ============================================================================ */
+
+.portal__content {
+  pointer-events: auto;
+}
+
+.portal__content--no-events {
+  pointer-events: none;
+}
+
+.portal__content--auto-events {
+  pointer-events: auto;
+}
+
+/* ============================================================================ */
+/* PORTAL ANIMATIONS */
+/* ============================================================================ */
+
+.portal__container--enter {
+  animation: portal-enter 200ms ease-out;
+}
+
+.portal__container--exit {
+  animation: portal-exit 200ms ease-in;
+}
+
+@keyframes portal-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes portal-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.portal__container[aria-hidden="true"] {
+  /* Hidden from screen readers */
+  visibility: hidden;
+}
+
+.portal__container[aria-hidden="false"] {
+  /* Visible to screen readers */
+  visibility: visible;
+}
+
+/* ============================================================================ */
+/* REDUCED MOTION SUPPORT */
+/* ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .portal__container--enter,
+  .portal__container--exit {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* DEBUG HELPERS */
+/* ============================================================================ */
+
+.portal__container--debug {
+  outline: 2px dashed #ff0000;
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+.portal__container--debug::before {
+  content: 'Portal';
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #ff0000;
+  color: white;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-family: monospace;
+  z-index: 9999;
+}
+
+/* ============================================================================ */
+/* FOCUS MANAGEMENT */
+/* ============================================================================ */
+
+.portal__focus-guard {
+  position: fixed;
+  top: -1px;
+  left: -1px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.portal__focus-guard:focus {
+  outline: none;
+}
+
+/* ============================================================================ */
+/* PERFORMANCE OPTIMIZATIONS */
+/* ============================================================================ */
+
+.portal__container--gpu-accelerated {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.portal__container--will-change {
+  will-change: transform, opacity;
+}
+
+/* ============================================================================ */
+/* INTERACTION HELPERS */
+/* ============================================================================ */
+
+.portal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+.portal__backdrop--blocking {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.portal__backdrop--non-blocking {
+  pointer-events: none;
+}

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

@@ -0,0 +1,488 @@
+/* Tooltip Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* TOOLTIP BASE */
+/* ============================================================================ */
+
+.tooltip {
+  --tooltip-border-radius: var(--cs-border-radius-scale-2);
+  --tooltip-shadow: var(--cs-shadows-md);
+  --tooltip-background: var(--cs-colors-gray-900);
+  --tooltip-color: var(--cs-colors-white);
+  --tooltip-border: none;
+  --tooltip-transition: var(--cs-transitions-all);
+  --tooltip-z-index: var(--cs-z-index-tooltip);
+  --tooltip-arrow-size: var(--cs-spacing-scale-sm);
+  --tooltip-offset: var(--cs-spacing-scale-sm);
+  --tooltip-max-width: calc(var(--cs-spacing-scale-6xl) * 2.667);
+  --tooltip-font-size: var(--cs-typography-font-size-sm);
+  --tooltip-line-height: var(--cs-typography-line-height-tight);
+  --tooltip-padding: var(--cs-spacing-scale-2) var(--cs-spacing-scale-3);
+}
+
+.tooltip__trigger {
+  display: inline-block;
+  cursor: help;
+}
+
+.tooltip__content {
+  position: absolute;
+  z-index: var(--tooltip-z-index);
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-color);
+  border: var(--tooltip-border);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--tooltip-shadow);
+  padding: var(--tooltip-padding);
+  font-size: var(--tooltip-font-size);
+  line-height: var(--tooltip-line-height);
+  max-width: var(--tooltip-max-width);
+  word-wrap: break-word;
+  transform-origin: var(--tooltip-transform-origin, center);
+  transition: var(--tooltip-transition);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* ============================================================================ */
+/* TOOLTIP SIZES */
+/* ============================================================================ */
+
+.tooltip__content--size-sm {
+  --tooltip-max-width: var(--cs-spacing-scale-50);
+  --tooltip-font-size: var(--cs-typography-font-size-xs);
+  --tooltip-padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+}
+
+.tooltip__content--size-md {
+  --tooltip-max-width: calc(var(--cs-spacing-scale-6xl) * 2.667);
+  --tooltip-font-size: var(--cs-typography-font-size-sm);
+  --tooltip-padding: var(--cs-spacing-scale-2) var(--cs-spacing-scale-3);
+}
+
+.tooltip__content--size-lg {
+  --tooltip-max-width: var(--cs-spacing-scale-120);
+  --tooltip-font-size: var(--cs-typography-font-size-base);
+  --tooltip-padding: var(--cs-spacing-scale-3) var(--cs-spacing-scale-4);
+  white-space: normal;
+}
+
+/* ============================================================================ */
+/* TOOLTIP VARIANTS */
+/* ============================================================================ */
+
+.tooltip__content--variant-default {
+  --tooltip-background: var(--cs-colors-gray-900);
+  --tooltip-color: var(--cs-colors-white);
+}
+
+.tooltip__content--variant-filled {
+  --tooltip-background: var(--cs-colors-gray-800);
+  --tooltip-color: var(--cs-colors-white);
+  --tooltip-border: var(--cs-border-width-normal) solid var(--cs-colors-gray-700);
+}
+
+.tooltip__content--variant-outlined {
+  --tooltip-background: var(--cs-colors-background-primary);
+  --tooltip-color: var(--cs-colors-text-primary);
+  --tooltip-border: var(--cs-border-width-normal) solid var(--cs-colors-gray-300);
+  --tooltip-shadow: var(--cs-shadows-lg);
+}
+
+.tooltip__content--variant-light {
+  --tooltip-background: var(--cs-colors-background-primary);
+  --tooltip-color: var(--cs-colors-text-primary);
+  --tooltip-border: var(--cs-border-width-normal) solid var(--cs-colors-gray-200);
+}
+
+/* ============================================================================ */
+/* TOOLTIP POSITIONING */
+/* ============================================================================ */
+
+.tooltip__content--position-top {
+  --tooltip-transform-origin: bottom center;
+  margin-bottom: var(--tooltip-offset);
+}
+
+.tooltip__content--position-top-start {
+  --tooltip-transform-origin: bottom left;
+  margin-bottom: var(--tooltip-offset);
+}
+
+.tooltip__content--position-top-end {
+  --tooltip-transform-origin: bottom right;
+  margin-bottom: var(--tooltip-offset);
+}
+
+.tooltip__content--position-bottom {
+  --tooltip-transform-origin: top center;
+  margin-top: var(--tooltip-offset);
+}
+
+.tooltip__content--position-bottom-start {
+  --tooltip-transform-origin: top left;
+  margin-top: var(--tooltip-offset);
+}
+
+.tooltip__content--position-bottom-end {
+  --tooltip-transform-origin: top right;
+  margin-top: var(--tooltip-offset);
+}
+
+.tooltip__content--position-left {
+  --tooltip-transform-origin: center right;
+  margin-right: var(--tooltip-offset);
+}
+
+.tooltip__content--position-left-start {
+  --tooltip-transform-origin: top right;
+  margin-right: var(--tooltip-offset);
+}
+
+.tooltip__content--position-left-end {
+  --tooltip-transform-origin: bottom right;
+  margin-right: var(--tooltip-offset);
+}
+
+.tooltip__content--position-right {
+  --tooltip-transform-origin: center left;
+  margin-left: var(--tooltip-offset);
+}
+
+.tooltip__content--position-right-start {
+  --tooltip-transform-origin: top left;
+  margin-left: var(--tooltip-offset);
+}
+
+.tooltip__content--position-right-end {
+  --tooltip-transform-origin: bottom left;
+  margin-left: var(--tooltip-offset);
+}
+
+/* ============================================================================ */
+/* TOOLTIP ARROW */
+/* ============================================================================ */
+
+.tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  pointer-events: none;
+}
+
+.tooltip__content--position-top .tooltip__arrow {
+  bottom: calc(-1 * var(--tooltip-arrow-size));
+  left: var(--cs-percentage-50);
+  transform: translateX(calc(-1 * var(--cs-percentage-50)));
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-top: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-top-start .tooltip__arrow {
+  bottom: calc(-1 * var(--tooltip-arrow-size));
+  left: var(--cs-spacing-scale-3);
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-top: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-top-end .tooltip__arrow {
+  bottom: calc(-1 * var(--tooltip-arrow-size));
+  right: var(--cs-spacing-scale-3);
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-top: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-bottom .tooltip__arrow {
+  top: calc(-1 * var(--tooltip-arrow-size));
+  left: var(--cs-percentage-50);
+  transform: translateX(calc(-1 * var(--cs-percentage-50)));
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-bottom-start .tooltip__arrow {
+  top: calc(-1 * var(--tooltip-arrow-size));
+  left: var(--cs-spacing-scale-3);
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-bottom-end .tooltip__arrow {
+  top: calc(-1 * var(--tooltip-arrow-size));
+  right: var(--cs-spacing-scale-3);
+  border-left: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-left .tooltip__arrow {
+  right: calc(-1 * var(--tooltip-arrow-size));
+  top: var(--cs-percentage-50);
+  transform: translateY(calc(-1 * var(--cs-percentage-50)));
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-left-start .tooltip__arrow {
+  right: calc(-1 * var(--tooltip-arrow-size));
+  top: var(--cs-spacing-scale-3);
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-left-end .tooltip__arrow {
+  right: calc(-1 * var(--tooltip-arrow-size));
+  bottom: var(--cs-spacing-scale-3);
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-left: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-right .tooltip__arrow {
+  left: calc(-1 * var(--tooltip-arrow-size));
+  top: var(--cs-percentage-50);
+  transform: translateY(calc(-1 * var(--cs-percentage-50)));
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-right-start .tooltip__arrow {
+  left: calc(-1 * var(--tooltip-arrow-size));
+  top: var(--cs-spacing-scale-3);
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+.tooltip__content--position-right-end .tooltip__arrow {
+  left: calc(-1 * var(--tooltip-arrow-size));
+  bottom: var(--cs-spacing-scale-3);
+  border-top: var(--tooltip-arrow-size) solid transparent;
+  border-bottom: var(--tooltip-arrow-size) solid transparent;
+  border-right: var(--tooltip-arrow-size) solid var(--tooltip-background);
+}
+
+/* ============================================================================ */
+/* TOOLTIP ANIMATIONS */
+/* ============================================================================ */
+
+.tooltip__content--enter {
+  animation: tooltip-fade-in var(--cs-transitions-durations-fast) ease-out;
+}
+
+.tooltip__content--exit {
+  animation: tooltip-fade-out var(--cs-transitions-durations-fast) ease-in;
+}
+
+.tooltip__content--slide-enter {
+  animation: tooltip-slide-in var(--cs-transitions-durations-fast) ease-out;
+}
+
+.tooltip__content--slide-exit {
+  animation: tooltip-slide-out var(--cs-transitions-durations-fast) ease-in;
+}
+
+.tooltip__content--scale-enter {
+  animation: tooltip-scale-in var(--cs-transitions-durations-fast) ease-out;
+}
+
+.tooltip__content--scale-exit {
+  animation: tooltip-scale-out var(--cs-transitions-durations-fast) ease-in;
+}
+
+@keyframes tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--tooltip-slide-from, translateY(calc(-1 * var(--cs-spacing-scale-1))));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltip-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: var(--tooltip-slide-to, translateY(calc(-1 * var(--cs-spacing-scale-1))));
+  }
+}
+
+@keyframes tooltip-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(var(--cs-scale-95));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes tooltip-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--cs-scale-95));
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .tooltip__content {
+    --tooltip-max-width: calc(100vw - var(--cs-spacing-scale-4));
+    --tooltip-font-size: var(--cs-typography-font-size-xs);
+    --tooltip-padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+    white-space: normal;
+  }
+
+  .tooltip__content--size-lg {
+    --tooltip-max-width: calc(100vw - var(--cs-spacing-scale-2));
+  }
+}
+
+@media (max-width: 480px) {
+  .tooltip__content {
+    --tooltip-max-width: calc(100vw - var(--cs-spacing-scale-2));
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.tooltip__content[role="tooltip"] {
+  /* Ensure tooltip is properly announced to screen readers */
+}
+
+.tooltip__trigger[aria-describedby] {
+  /* Trigger has associated tooltip */
+}
+
+.tooltip__trigger:focus-visible {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-primary-500);
+  outline-offset: var(--cs-spacing-scale-0-5);
+  border-radius: var(--cs-border-radius-scale-1);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .tooltip__content {
+    border: var(--cs-border-width-normal) solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip__content {
+    transition: none;
+  }
+
+  .tooltip__content--enter,
+  .tooltip__content--exit,
+  .tooltip__content--slide-enter,
+  .tooltip__content--slide-exit,
+  .tooltip__content--scale-enter,
+  .tooltip__content--scale-exit {
+    animation: none;
+  }
+}
+
+/* ============================================================================ */
+/* INTERACTION STATES */
+/* ============================================================================ */
+
+.tooltip__trigger--disabled {
+  pointer-events: none;
+  opacity: var(--cs-opacity-50);
+}
+
+.tooltip__content--no-pointer-events {
+  pointer-events: none;
+}
+
+.tooltip__content--interactive {
+  pointer-events: auto;
+  cursor: default;
+}
+
+/* ============================================================================ */
+/* TOOLTIP CONTENT WRAPPER */
+/* ============================================================================ */
+
+.tooltip__wrapper {
+  display: inline-block;
+}
+
+.tooltip__wrapper--block {
+  display: block;
+}
+
+.tooltip__wrapper--inline {
+  display: inline;
+}
+
+.tooltip__wrapper--inline-block {
+  display: inline-block;
+}
+
+/* ============================================================================ */
+/* SPECIAL CASES */
+/* ============================================================================ */
+
+.tooltip__content--multiline {
+  white-space: normal;
+  text-align: left;
+}
+
+.tooltip__content--nowrap {
+  white-space: nowrap;
+}
+
+.tooltip__content--pre {
+  white-space: pre;
+  font-family: var(--cs-typography-font-family-mono);
+}
+
+.tooltip__content--pre-wrap {
+  white-space: pre-wrap;
+  font-family: var(--cs-typography-font-family-mono);
+}