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

package/src/styles/components/feedback/toast.css

@@ -0,0 +1,564 @@
+/* Toast Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* TOAST CONTAINER */
+/* ============================================================================ */
+
+.toast {
+  --toast-border-radius: var(--cs-border-radius-lg);
+  --toast-shadow: var(--cs-shadows-lg);
+  --toast-transition: var(--cs-transitions-properties-all);
+  --toast-icon-size: var(--cs-spacing-scale-lg);
+  --toast-spacing: var(--cs-spacing-scale-md);
+}
+
+.toast__container {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cs-spacing-scale-md);
+  border-radius: var(--toast-border-radius);
+  box-shadow: var(--toast-shadow);
+  transition: var(--toast-transition);
+  transform: translateX(0);
+  overflow: hidden;
+}
+
+/* Toast container sizes */
+.toast__container--sm {
+  padding: var(--cs-spacing-scale-2) var(--cs-spacing-scale-md);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  --toast-icon-size: var(--cs-spacing-scale-4);
+}
+
+.toast__container--md {
+  padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-4);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  --toast-icon-size: var(--cs-spacing-scale-5);
+}
+
+.toast__container--lg {
+  padding: var(--cs-spacing-scale-4);
+  font-size: var(--cs-fonts-primary-sizes-base);
+  --toast-icon-size: var(--cs-spacing-scale-6);
+}
+
+/* Toast variants */
+.toast__container--default {
+  background-color: var(--cs-colors-surface-background);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  color: var(--cs-colors-text-primary);
+}
+
+.toast__container--success {
+  background-color: var(--cs-colors-semantic-success-50);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-semantic-success-200);
+  color: var(--cs-colors-semantic-success-800);
+}
+
+.toast__container--warning {
+  background-color: var(--cs-colors-semantic-warning-50);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-semantic-warning-200);
+  color: var(--cs-colors-semantic-warning-800);
+}
+
+.toast__container--error {
+  background-color: var(--cs-colors-semantic-error-50);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-semantic-error-200);
+  color: var(--cs-colors-semantic-error-800);
+}
+
+.toast__container--info {
+  background-color: var(--cs-colors-primary-50);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-primary-200);
+  color: var(--cs-colors-primary-800);
+}
+
+/* Toast variant modifiers */
+.toast__container--bordered.toast__container--success {
+  border-left: var(--cs-spacing-scale-xs) solid var(--cs-colors-semantic-success-600);
+  background-color: var(--cs-colors-surface-background);
+  color: var(--cs-colors-text-primary);
+}
+
+.toast__container--bordered.toast__container--warning {
+  border-left: var(--cs-spacing-scale-xs) solid var(--cs-colors-semantic-warning-600);
+  background-color: var(--cs-colors-surface-background);
+  color: var(--cs-colors-text-primary);
+}
+
+.toast__container--bordered.toast__container--error {
+  border-left: var(--cs-spacing-scale-xs) solid var(--cs-colors-semantic-error-600);
+  background-color: var(--cs-colors-surface-background);
+  color: var(--cs-colors-text-primary);
+}
+
+.toast__container--bordered.toast__container--info {
+  border-left: var(--cs-spacing-scale-xs) solid var(--cs-colors-primary-600);
+  background-color: var(--cs-colors-surface-background);
+  color: var(--cs-colors-text-primary);
+}
+
+.toast__container--filled.toast__container--success {
+  background-color: var(--cs-colors-semantic-success-600);
+  border-color: var(--cs-colors-semantic-success-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.toast__container--filled.toast__container--warning {
+  background-color: var(--cs-colors-semantic-warning-600);
+  border-color: var(--cs-colors-semantic-warning-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.toast__container--filled.toast__container--error {
+  background-color: var(--cs-colors-semantic-error-600);
+  border-color: var(--cs-colors-semantic-error-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.toast__container--filled.toast__container--info {
+  background-color: var(--cs-colors-primary-600);
+  border-color: var(--cs-colors-primary-600);
+  color: var(--cs-colors-surface-background);
+}
+
+/* ============================================================================ */
+/* TOAST PROGRESS BAR */
+/* ============================================================================ */
+
+.toast__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--cs-spacing-scale-1);
+  background-color: var(--cs-colors-surface-divider);
+  border-radius: var(--toast-border-radius) var(--toast-border-radius) 0 0;
+  overflow: hidden;
+}
+
+.toast__progress-bar {
+  height: 100%;
+  background-color: var(--cs-colors-primary-500);
+  transition: width var(--cs-transitions-durations-fast) linear;
+  border-radius: inherit;
+}
+
+.toast__progress-bar--success {
+  background-color: var(--cs-colors-semantic-success-500);
+}
+
+.toast__progress-bar--warning {
+  background-color: var(--cs-colors-semantic-warning-500);
+}
+
+.toast__progress-bar--error {
+  background-color: var(--cs-colors-semantic-error-500);
+}
+
+.toast__progress-bar--info {
+  background-color: var(--cs-colors-primary-500);
+}
+
+/* ============================================================================ */
+/* TOAST ICON */
+/* ============================================================================ */
+
+.toast__icon {
+  flex-shrink: 0;
+  width: var(--toast-icon-size);
+  height: var(--toast-icon-size);
+  margin-top: var(--cs-spacing-scale-0-5);
+}
+
+.toast__icon--success {
+  color: var(--cs-colors-semantic-success-600);
+}
+
+.toast__icon--warning {
+  color: var(--cs-colors-semantic-warning-600);
+}
+
+.toast__icon--error {
+  color: var(--cs-colors-semantic-error-600);
+}
+
+.toast__icon--info {
+  color: var(--cs-colors-primary-600);
+}
+
+.toast__icon--default {
+  color: var(--cs-colors-text-secondary);
+}
+
+/* Icon colors for filled variant */
+.toast__container--filled .toast__icon {
+  color: currentColor;
+}
+
+/* ============================================================================ */
+/* TOAST CONTENT */
+/* ============================================================================ */
+
+.toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast__title {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  line-height: var(--cs-fonts-primary-line-heights-tight);
+  margin: 0 0 var(--cs-spacing-scale-1) 0;
+}
+
+.toast__message {
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  margin: 0;
+}
+
+.toast__message--only {
+  margin: 0;
+}
+
+/* ============================================================================ */
+/* TOAST ACTIONS */
+/* ============================================================================ */
+
+.toast__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-1);
+  margin-top: var(--cs-spacing-scale-2);
+  flex-wrap: wrap;
+}
+
+.toast__action-button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-2);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  border-radius: var(--cs-border-radius-sm);
+  border: none;
+  cursor: pointer;
+  transition: var(--toast-transition);
+  text-decoration: none;
+}
+
+.toast__action-button:focus {
+  outline: var(--cs-border-width-focus) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* Action button variants */
+.toast__action-button--primary {
+  background-color: var(--cs-colors-primary-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.toast__action-button--primary:hover {
+  background-color: var(--cs-colors-primary-700);
+}
+
+.toast__action-button--secondary {
+  background-color: var(--cs-colors-gray-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.toast__action-button--secondary:hover {
+  background-color: var(--cs-colors-gray-700);
+}
+
+.toast__action-button--ghost {
+  background-color: transparent;
+  color: var(--cs-colors-text-secondary);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+}
+
+.toast__action-button--ghost:hover {
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+/* ============================================================================ */
+/* TOAST CLOSE BUTTON */
+/* ============================================================================ */
+
+.toast__close-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cs-spacing-scale-6);
+  height: var(--cs-spacing-scale-6);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--cs-border-radius-sm);
+  cursor: pointer;
+  transition: var(--toast-transition);
+  color: var(--cs-colors-text-secondary);
+  opacity: 0.7;
+  margin: calc(-1 * var(--cs-spacing-scale-1)) calc(-1 * var(--cs-spacing-scale-1)) 0 var(--cs-spacing-scale-md);
+}
+
+.toast__close-button:hover {
+  opacity: 1;
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+.toast__close-button:focus {
+  outline: var(--cs-border-width-focus) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+  opacity: 1;
+}
+
+.toast__close-icon {
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+}
+
+/* ============================================================================ */
+/* TOAST CONTAINER POSITIONING */
+/* ============================================================================ */
+
+.toast-container {
+  position: fixed;
+  z-index: var(--cs-z-index-modal);
+  max-width: var(--cs-spacing-scale-100);
+  width: 100%;
+}
+
+.toast-container--top-left {
+  top: var(--cs-spacing-scale-4);
+  left: var(--cs-spacing-scale-4);
+}
+
+.toast-container--top-center {
+  top: var(--cs-spacing-scale-4);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container--top-right {
+  top: var(--cs-spacing-scale-4);
+  right: var(--cs-spacing-scale-4);
+}
+
+.toast-container--bottom-left {
+  bottom: var(--cs-spacing-scale-4);
+  left: var(--cs-spacing-scale-4);
+}
+
+.toast-container--bottom-center {
+  bottom: var(--cs-spacing-scale-4);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container--bottom-right {
+  bottom: var(--cs-spacing-scale-4);
+  right: var(--cs-spacing-scale-4);
+}
+
+.toast-container__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-2);
+}
+
+/* ============================================================================ */
+/* ANIMATIONS */
+/* ============================================================================ */
+
+.toast__container--enter {
+  animation: toast-slide-in var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.toast__container--exit {
+  animation: toast-slide-out var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+@keyframes toast-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+/* Slide in from left for left-positioned toasts */
+.toast-container--top-left .toast__container--enter,
+.toast-container--bottom-left .toast__container--enter {
+  animation: toast-slide-in-left var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.toast-container--top-left .toast__container--exit,
+.toast-container--bottom-left .toast__container--exit {
+  animation: toast-slide-out-left var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+@keyframes toast-slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-slide-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* Slide in from top for center-positioned toasts */
+.toast-container--top-center .toast__container--enter {
+  animation: toast-slide-in-top var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.toast-container--top-center .toast__container--exit {
+  animation: toast-slide-out-top var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+.toast-container--bottom-center .toast__container--enter {
+  animation: toast-slide-in-bottom var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-out);
+}
+
+.toast-container--bottom-center .toast__container--exit {
+  animation: toast-slide-out-bottom var(--cs-transitions-durations-normal) var(--cs-transitions-easings-ease-in);
+}
+
+@keyframes toast-slide-in-top {
+  from {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-slide-out-top {
+  from {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-in-bottom {
+  from {
+    transform: translateX(-50%) translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-slide-out-bottom {
+  from {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-50%) translateY(100%);
+    opacity: 0;
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .toast-container {
+    max-width: none;
+    left: var(--cs-spacing-scale-2) !important;
+    right: var(--cs-spacing-scale-2) !important;
+    transform: none !important;
+  }
+
+  .toast__container {
+    font-size: var(--cs-fonts-primary-sizes-sm);
+  }
+
+  .toast__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toast__action-button {
+    justify-content: center;
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.toast__container[role="alert"] {
+  /* Ensure toast is announced to screen readers */
+}
+
+.toast__container:focus {
+  outline: var(--cs-border-width-focus) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .toast__container {
+    border-width: var(--cs-border-width-thick);
+  }
+
+  .toast__icon,
+  .toast__close-button,
+  .toast__action-button {
+    outline: var(--cs-border-width-normal) solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .toast__container,
+  .toast__action-button,
+  .toast__close-button,
+  .toast__progress-bar {
+    transition: none;
+  }
+
+  .toast__container--enter,
+  .toast__container--exit {
+    animation: none;
+  }
+}

package/src/styles/components/index.css

@@ -0,0 +1,17 @@
+/* Components Layer - All UI Component Styles */
+/* This layer contains all component styles organized by category */
+
+/* Base components */
+@import './base/index.css';
+
+/* Navigation components */
+@import './navigation/index.css';
+
+/* Data display components */
+@import './data-display/index.css';
+
+/* Feedback components */
+@import './feedback/index.css';
+
+/* Overlay components */
+@import './overlay/index.css';