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

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

@@ -0,0 +1,358 @@
+/* Alert Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* ALERT CONTAINER */
+/* ============================================================================ */
+
+.alert {
+  --alert-border-radius: var(--cs-border-radius-md);
+  --alert-spacing: var(--cs-spacing-scale-lg);
+  --alert-icon-size: var(--cs-spacing-scale-xl);
+  --alert-transition: var(--cs-transitions-properties-colors);
+}
+
+.alert__container {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cs-spacing-scale-md);
+  padding: var(--alert-spacing);
+  border-radius: var(--alert-border-radius);
+  border: var(--cs-border-width-normal) solid;
+  transition: var(--alert-transition);
+}
+
+/* Alert container sizes */
+.alert__container--sm {
+  padding: var(--cs-spacing-scale-sm) var(--cs-spacing-scale-md);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  --alert-icon-size: var(--cs-spacing-scale-lg);
+}
+
+.alert__container--md {
+  padding: var(--cs-spacing-scale-md) var(--cs-spacing-scale-lg);
+  font-size: var(--cs-fonts-primary-sizes-base);
+  --alert-icon-size: var(--cs-spacing-scale-xl);
+}
+
+.alert__container--lg {
+  padding: var(--cs-spacing-scale-lg) var(--cs-spacing-scale-2xl);
+  font-size: var(--cs-fonts-primary-sizes-lg);
+  --alert-icon-size: var(--cs-spacing-scale-2xl);
+}
+
+/* Alert variants */
+.alert__container--success {
+  background-color: var(--cs-colors-semantic-success-50);
+  border-color: var(--cs-colors-semantic-success-200);
+  color: var(--cs-colors-semantic-success-800);
+}
+
+.alert__container--warning {
+  background-color: var(--cs-colors-semantic-warning-50);
+  border-color: var(--cs-colors-semantic-warning-200);
+  color: var(--cs-colors-semantic-warning-800);
+}
+
+.alert__container--error {
+  background-color: var(--cs-colors-semantic-error-50);
+  border-color: var(--cs-colors-semantic-error-200);
+  color: var(--cs-colors-semantic-error-800);
+}
+
+.alert__container--info {
+  background-color: var(--cs-colors-primary-50);
+  border-color: var(--cs-colors-primary-200);
+  color: var(--cs-colors-primary-800);
+}
+
+.alert__container--default {
+  background-color: var(--cs-colors-surface-surface);
+  border-color: var(--cs-colors-surface-border);
+  color: var(--cs-colors-text-primary);
+}
+
+/* Alert variant modifiers */
+.alert__container--filled.alert__container--success {
+  background-color: var(--cs-colors-semantic-success-600);
+  border-color: var(--cs-colors-semantic-success-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__container--filled.alert__container--warning {
+  background-color: var(--cs-colors-semantic-warning-600);
+  border-color: var(--cs-colors-semantic-warning-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__container--filled.alert__container--error {
+  background-color: var(--cs-colors-semantic-error-600);
+  border-color: var(--cs-colors-semantic-error-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__container--filled.alert__container--info {
+  background-color: var(--cs-colors-primary-600);
+  border-color: var(--cs-colors-primary-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__container--outlined {
+  background-color: var(--cs-colors-surface-background);
+  border-width: var(--cs-border-width-thick);
+}
+
+/* ============================================================================ */
+/* ALERT ICON */
+/* ============================================================================ */
+
+.alert__icon {
+  flex-shrink: 0;
+  width: var(--alert-icon-size);
+  height: var(--alert-icon-size);
+  margin-top: var(--cs-spacing-scale-0-5);
+}
+
+.alert__icon--success {
+  color: var(--cs-colors-semantic-success-600);
+}
+
+.alert__icon--warning {
+  color: var(--cs-colors-semantic-warning-600);
+}
+
+.alert__icon--error {
+  color: var(--cs-colors-semantic-error-600);
+}
+
+.alert__icon--info {
+  color: var(--cs-colors-primary-600);
+}
+
+.alert__icon--default {
+  color: var(--cs-colors-text-secondary);
+}
+
+/* Icon colors for filled variant */
+.alert__container--filled .alert__icon {
+  color: currentColor;
+}
+
+/* ============================================================================ */
+/* ALERT CONTENT */
+/* ============================================================================ */
+
+.alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.alert__title {
+  font-weight: var(--cs-fonts-weights-semibold);
+  line-height: var(--cs-fonts-line-heights-5);
+  margin: 0 0 var(--cs-spacing-scale-1) 0;
+}
+
+.alert__message {
+  line-height: var(--cs-fonts-line-heights-6);
+  margin: 0;
+}
+
+.alert__message--only {
+  margin: 0;
+}
+
+/* ============================================================================ */
+/* ALERT ACTIONS */
+/* ============================================================================ */
+
+.alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+  margin-top: var(--cs-spacing-scale-3);
+}
+
+.alert__action-button {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cs-spacing-scale-1) var(--cs-spacing-scale-3);
+  font-size: var(--cs-fonts-sizes-sm);
+  font-weight: var(--cs-fonts-weights-medium);
+  border-radius: var(--cs-border-radius-sm);
+  border: var(--cs-border-width-normal) solid transparent;
+  cursor: pointer;
+  transition: var(--alert-transition);
+  text-decoration: none;
+}
+
+.alert__action-button:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* Action button variants */
+.alert__action-button--primary {
+  background-color: var(--cs-colors-primary-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__action-button--primary:hover {
+  background-color: var(--cs-colors-primary-700);
+}
+
+.alert__action-button--secondary {
+  background-color: var(--cs-colors-gray-600);
+  color: var(--cs-colors-surface-background);
+}
+
+.alert__action-button--secondary:hover {
+  background-color: var(--cs-colors-gray-700);
+}
+
+.alert__action-button--ghost {
+  background-color: transparent;
+  color: currentColor;
+  border-color: currentColor;
+}
+
+.alert__action-button--ghost:hover {
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+/* ============================================================================ */
+/* ALERT CLOSE BUTTON */
+/* ============================================================================ */
+
+.alert__close-button {
+  position: absolute;
+  top: var(--cs-spacing-scale-2);
+  right: var(--cs-spacing-scale-2);
+  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(--alert-transition);
+  color: currentColor;
+  opacity: 0.7;
+}
+
+.alert__close-button:hover {
+  opacity: 1;
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+.alert__close-button:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+  opacity: 1;
+}
+
+.alert__close-icon {
+  width: var(--cs-spacing-scale-4);
+  height: var(--cs-spacing-scale-4);
+}
+
+/* ============================================================================ */
+/* ANIMATIONS */
+/* ============================================================================ */
+
+.alert__container--enter {
+  animation: alert-slide-in var(--cs-transitions-durations-normal) ease-out;
+}
+
+.alert__container--exit {
+  animation: alert-slide-out var(--cs-transitions-durations-normal) ease-in;
+}
+
+@keyframes alert-slide-in {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes alert-slide-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .alert__container {
+    margin: var(--cs-spacing-scale-2);
+  }
+
+  .alert__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .alert__action-button {
+    justify-content: center;
+  }
+
+  .alert__close-button {
+    top: var(--cs-spacing-scale-1);
+    right: var(--cs-spacing-scale-1);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.alert__container[role="alert"] {
+  /* Ensure alert is announced to screen readers */
+}
+
+.alert__container:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .alert__container {
+    border-width: var(--cs-border-width-thick);
+  }
+
+  .alert__icon,
+  .alert__close-button {
+    outline: var(--cs-border-width-normal) solid;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .alert__container,
+  .alert__action-button,
+  .alert__close-button {
+    transition: none;
+  }
+
+  .alert__container--enter,
+  .alert__container--exit {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,7 @@
+/* Feedback Components */
+/* Components for user feedback and status communication */
+
+@import './alert.css';
+@import './progress.css';
+@import './skeleton.css';
+@import './toast.css';