@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.51 → 0.3.0

package/src/styles/components/layout/container.css

@@ -0,0 +1,466 @@
+/* Container Component Styles */
+/* Implements Phase 2 container max-widths and content width system */
+
+/* Container CSS Variables */
+:root {
+  /* Default Container Max-Widths */
+  --container-max-width-xs: 100%;
+  --container-max-width-sm: 640px;
+  --container-max-width-md: 768px;
+  --container-max-width-lg: 1024px;
+  --container-max-width-xl: 1280px;
+  --container-max-width-2xl: 1536px;
+  --container-max-width-3xl: 1792px;
+
+  /* Default Container Padding */
+  --container-padding-xs: var(--cs-spacing-scale-md);
+  --container-padding-sm: var(--cs-spacing-scale-lg);
+  --container-padding-md: var(--cs-spacing-scale-xl);
+  --container-padding-lg: var(--cs-spacing-scale-2xl);
+  --container-padding-xl: var(--cs-spacing-scale-2xl);
+  --container-padding-2xl: var(--cs-spacing-scale-3xl);
+  --container-padding-3xl: var(--cs-spacing-scale-3xl);
+
+  /* Character Width Constraints */
+  --container-character-width-min: 65ch;
+  --container-character-width-max: 75ch;
+  --container-character-width-optimal: 70ch;
+
+  /* Container Spacing */
+  --container-margin-x: auto;
+  --container-margin-y: 0;
+
+  /* Container Animation */
+  --container-transition: var(--cs-transitions-duration-normal) var(--cs-transitions-easing-ease);
+}
+
+/* Base Container */
+.container {
+  width: 100%;
+  margin-left: var(--container-margin-x);
+  margin-right: var(--container-margin-x);
+  margin-top: var(--container-margin-y);
+  margin-bottom: var(--container-margin-y);
+  transition: var(--container-transition);
+}
+
+/* Centered Container */
+.container--centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Container Types */
+
+/* Standard Container - Uses breakpoint-based max-widths */
+.container--container {
+  max-width: var(--container-max-width-xs);
+  padding-left: var(--container-padding-xs);
+  padding-right: var(--container-padding-xs);
+}
+
+/* Content Container - Optimized for reading */
+.container--content {
+  max-width: var(--container-max-width-xs);
+  padding-left: var(--container-padding-xs);
+  padding-right: var(--container-padding-xs);
+}
+
+/* Fluid Container - No max-width constraints */
+.container--fluid {
+  max-width: none;
+  padding-left: var(--container-padding-xs);
+  padding-right: var(--container-padding-xs);
+}
+
+/* Responsive Container Max-Widths */
+
+/* xs breakpoint (475px): 100% width */
+@media (max-width: 475px) {
+  .container--container,
+  .container--content {
+    max-width: var(--container-max-width-xs);
+    padding-left: var(--container-padding-xs);
+    padding-right: var(--container-padding-xs);
+  }
+}
+
+/* sm breakpoint (640px): 640px max-width */
+@media (min-width: 640px) {
+  .container--container {
+    max-width: var(--container-max-width-sm);
+    padding-left: var(--container-padding-sm);
+    padding-right: var(--container-padding-sm);
+  }
+
+  .container--content {
+    max-width: var(--container-max-width-sm);
+    padding-left: var(--container-padding-sm);
+    padding-right: var(--container-padding-sm);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-sm);
+    padding-right: var(--container-padding-sm);
+  }
+}
+
+/* md breakpoint (768px): 768px max-width */
+@media (min-width: 768px) {
+  .container--container {
+    max-width: var(--container-max-width-md);
+    padding-left: var(--container-padding-md);
+    padding-right: var(--container-padding-md);
+  }
+
+  .container--content {
+    max-width: var(--container-character-width-min);
+    padding-left: var(--container-padding-md);
+    padding-right: var(--container-padding-md);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-md);
+    padding-right: var(--container-padding-md);
+  }
+}
+
+/* lg breakpoint (1024px): 1024px max-width */
+@media (min-width: 1024px) {
+  .container--container {
+    max-width: var(--container-max-width-lg);
+    padding-left: var(--container-padding-lg);
+    padding-right: var(--container-padding-lg);
+  }
+
+  .container--content {
+    max-width: var(--container-character-width-optimal);
+    padding-left: var(--container-padding-lg);
+    padding-right: var(--container-padding-lg);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-lg);
+    padding-right: var(--container-padding-lg);
+  }
+}
+
+/* xl breakpoint (1280px): 1280px max-width */
+@media (min-width: 1280px) {
+  .container--container {
+    max-width: var(--container-max-width-xl);
+    padding-left: var(--container-padding-xl);
+    padding-right: var(--container-padding-xl);
+  }
+
+  .container--content {
+    max-width: var(--container-character-width-max);
+    padding-left: var(--container-padding-xl);
+    padding-right: var(--container-padding-xl);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-xl);
+    padding-right: var(--container-padding-xl);
+  }
+}
+
+/* 2xl breakpoint (1536px): 1536px max-width */
+@media (min-width: 1536px) {
+  .container--container {
+    max-width: var(--container-max-width-2xl);
+    padding-left: var(--container-padding-2xl);
+    padding-right: var(--container-padding-2xl);
+  }
+
+  .container--content {
+    max-width: var(--container-character-width-max);
+    padding-left: var(--container-padding-2xl);
+    padding-right: var(--container-padding-2xl);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-2xl);
+    padding-right: var(--container-padding-2xl);
+  }
+}
+
+/* 3xl breakpoint (1920px): 1792px max-width */
+@media (min-width: 1920px) {
+  .container--container {
+    max-width: var(--container-max-width-3xl);
+    padding-left: var(--container-padding-3xl);
+    padding-right: var(--container-padding-3xl);
+  }
+
+  .container--content {
+    max-width: var(--container-character-width-max);
+    padding-left: var(--container-padding-3xl);
+    padding-right: var(--container-padding-3xl);
+  }
+
+  .container--fluid {
+    padding-left: var(--container-padding-3xl);
+    padding-right: var(--container-padding-3xl);
+  }
+}
+
+/* Content Width Patterns */
+
+/* Narrow Width - For reading content */
+.container--width-narrow {
+  max-width: 100%;
+}
+
+@media (min-width: 768px) {
+  .container--width-narrow {
+    max-width: var(--container-character-width-min);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container--width-narrow {
+    max-width: var(--container-character-width-optimal);
+  }
+}
+
+@media (min-width: 1280px) {
+  .container--width-narrow {
+    max-width: var(--container-character-width-max);
+  }
+}
+
+/* Standard Width - For general content */
+.container--width-standard {
+  max-width: 100%;
+}
+
+@media (min-width: 768px) {
+  .container--width-standard {
+    max-width: 90%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container--width-standard {
+    max-width: 85%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container--width-standard {
+    max-width: 80%;
+  }
+}
+
+/* Wide Width - For data and dashboards */
+.container--width-wide {
+  max-width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .container--width-wide {
+    max-width: 95%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container--width-wide {
+    max-width: 90%;
+  }
+}
+
+/* Full Width - No constraints */
+.container--width-full {
+  max-width: 100%;
+}
+
+/* Character Width Constraints */
+.container--character-width {
+  max-width: var(--container-character-width-optimal);
+}
+
+@media (min-width: 768px) {
+  .container--character-width {
+    min-width: var(--container-character-width-min);
+    max-width: var(--container-character-width-max);
+  }
+}
+
+/* Breakout Container - Allows content to break out on small screens */
+.container--breakout {
+  margin-left: calc(-1 * var(--container-padding-xs));
+  margin-right: calc(-1 * var(--container-padding-xs));
+}
+
+@media (min-width: 640px) {
+  .container--breakout {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* Section Container Styles */
+.section-container {
+  position: relative;
+}
+
+.section-container--full-width-bg {
+  position: relative;
+}
+
+.section-container--full-width-bg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  right: 50%;
+  bottom: 0;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  z-index: -1;
+}
+
+/* Section Background Variants */
+.section-container--default::before {
+  background-color: var(--cs-colors-surface-background);
+}
+
+.section-container--muted::before {
+  background-color: var(--cs-colors-surface-muted);
+}
+
+.section-container--accent::before {
+  background-color: var(--cs-colors-surface-accent);
+}
+
+.section-container--inverse::before {
+  background-color: var(--cs-colors-surface-inverse);
+}
+
+/* Dark Mode Support */
+.dark .section-container--default::before {
+  background-color: var(--cs-modes-dark-colors-surface-background);
+}
+
+.dark .section-container--muted::before {
+  background-color: var(--cs-modes-dark-colors-surface-muted);
+}
+
+.dark .section-container--accent::before {
+  background-color: var(--cs-modes-dark-colors-surface-accent);
+}
+
+.dark .section-container--inverse::before {
+  background-color: var(--cs-modes-dark-colors-surface-inverse);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .container {
+    outline: 1px solid var(--cs-colors-border);
+    outline-offset: -1px;
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .container {
+    transition: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .container {
+    max-width: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .container--character-width {
+    max-width: none;
+  }
+
+  .section-container--full-width-bg::before {
+    display: none;
+  }
+}
+
+/* Container Utilities */
+
+/* Padding utilities */
+.container--no-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.container--padding-sm {
+  --container-padding-xs: var(--cs-spacing-scale-sm);
+  --container-padding-sm: var(--cs-spacing-scale-md);
+  --container-padding-md: var(--cs-spacing-scale-lg);
+  --container-padding-lg: var(--cs-spacing-scale-xl);
+  --container-padding-xl: var(--cs-spacing-scale-xl);
+  --container-padding-2xl: var(--cs-spacing-scale-2xl);
+  --container-padding-3xl: var(--cs-spacing-scale-2xl);
+}
+
+.container--padding-lg {
+  --container-padding-xs: var(--cs-spacing-scale-lg);
+  --container-padding-sm: var(--cs-spacing-scale-xl);
+  --container-padding-md: var(--cs-spacing-scale-2xl);
+  --container-padding-lg: var(--cs-spacing-scale-3xl);
+  --container-padding-xl: var(--cs-spacing-scale-3xl);
+  --container-padding-2xl: var(--cs-spacing-scale-4xl);
+  --container-padding-3xl: var(--cs-spacing-scale-4xl);
+}
+
+/* Max-width utilities */
+.container--max-width-sm {
+  max-width: var(--container-max-width-sm);
+}
+
+.container--max-width-md {
+  max-width: var(--container-max-width-md);
+}
+
+.container--max-width-lg {
+  max-width: var(--container-max-width-lg);
+}
+
+.container--max-width-xl {
+  max-width: var(--container-max-width-xl);
+}
+
+.container--max-width-2xl {
+  max-width: var(--container-max-width-2xl);
+}
+
+.container--max-width-3xl {
+  max-width: var(--container-max-width-3xl);
+}
+
+/* Focus Management */
+.container:focus-within {
+  /* Enhanced focus visibility when container contains focused elements */
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: 768px) {
+  .container {
+    /* Adjust container behavior based on container size */
+  }
+}
+
+/* Accessibility Enhancements */
+.container[role="main"] {
+  /* Main content container styles */
+}
+
+.container[role="article"] {
+  /* Article container styles */
+}
+
+.container[role="section"] {
+  /* Section container styles */
+}

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

@@ -0,0 +1,5 @@
+/* Layout Components */
+/* Components for page layout, grid systems, and content organization */
+
+@import './container.css';
+@import './responsive-grid.css';