@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.37 → 0.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rakeyshgidwani/roger-ui-bank-theme-stan-design",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "description": "Roger UI stan-design theme - Complete design system with components, styles, and utilities",
   "keywords": [
     "design-system",

package/src/components/ui/theme-toggle.tsx

@@ -9,9 +9,19 @@ export const ThemeToggle: React.FC = () => {
   const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
-    // Check initial theme
-    const isDarkMode = document.documentElement.classList.contains('dark');
+    // Check initial theme from localStorage and DOM
+    const savedTheme = localStorage.getItem('theme');
+    const isDarkMode = savedTheme === 'dark' ||
+      (savedTheme === null && document.documentElement.classList.contains('dark'));
+
     setIsDark(isDarkMode);
+
+    // Ensure DOM is in sync
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
   }, []);
 
   const toggleTheme = () => {
@@ -32,10 +42,15 @@ export const ThemeToggle: React.FC = () => {
       variant="ghost"
       size="sm"
       onClick={toggleTheme}
-      className="h-8 w-8 px-0"
+      className="theme-toggle h-8 w-8 px-0"
       aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+      aria-pressed={isDark}
     >
-      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {isDark ? (
+        <Sun className="h-4 w-4 sun-icon" />
+      ) : (
+        <Moon className="h-4 w-4 moon-icon" />
+      )}
     </Button>
   );
 };

package/src/styles/components/base/badge.css

@@ -89,6 +89,8 @@
 }
 
 /* Base Badge Component - Using Original Poker Project Styling */
+@layer components {
+
 .badge {
   /* Layout */
   display: inline-flex;
@@ -426,3 +428,5 @@
     grid-template-columns: 1fr 1fr !important;
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/button.css

@@ -179,6 +179,8 @@
 }
 
 /* Base Button Component */
+@layer components {
+
 .button {
   /* Layout */
   display: inline-flex;
@@ -527,14 +529,7 @@
   border-color: var(--cs-modes-dark-colors-border);
 }
 
-.dark .button--variant-ghost {
-  color: var(--cs-modes-dark-colors-text-secondary);
-}
-
-.dark .button--variant-ghost:hover {
-  background-color: var(--cs-modes-dark-colors-interactive-hover);
-  color: var(--cs-modes-dark-colors-text-primary);
-}
+/* Ghost variant automatically adapts to theme via CSS variables */
 
 .dark .button--variant-destructive {
   background-color: var(--cs-modes-dark-colors-semantic-error);
@@ -772,3 +767,5 @@
     transition: none;
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/card.css

@@ -133,6 +133,8 @@
 }
 
 /* Base Card Component */
+@layer components {
+
 .card {
   /* Base Styles */
   background-color: var(--card-background);
@@ -599,3 +601,5 @@
   box-shadow: var(--card-shadow-base);
   transform: none;
 }
+
+} /* End @layer components */

package/src/styles/components/base/checkbox.css

@@ -37,6 +37,8 @@
 }
 
 /* Checkbox Base Styles */
+@layer components {
+
 .checkbox {
   position: relative;
   display: inline-flex;
@@ -440,3 +442,5 @@
   background-color: var(--cs-colors-semantic-info);
   color: var(--cs-colors-text-on-primary);
 }
+
+} /* End @layer components */

package/src/styles/components/base/input.css

@@ -164,6 +164,8 @@
 }
 
 /* Input Base Styles */
+@layer components {
+
 .input {
   position: relative;
   display: block;
@@ -885,3 +887,5 @@
     border-width: var(--input-border-width-normal);
   }
 }
+
+} /* End @layer components */

package/src/styles/components/base/label.css

@@ -56,6 +56,8 @@
 }
 
 /* Base Label Styles */
+@layer components {
+
 .label {
   display: inline-block;
   font-family: var(--cs-fonts-primary-family), var(--cs-fonts-primary-fallbacks);
@@ -294,3 +296,5 @@
     background: var(--cs-print-background-color);
   }
 }
+
+} /* End @layer components */

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

@@ -0,0 +1,4 @@
+/* UI Components */
+/* Interactive UI components and widgets */
+
+@import './theme-toggle.css';

package/src/styles/components/ui/theme-toggle.css

@@ -0,0 +1,200 @@
+/* ThemeToggle Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* ThemeToggle Component CSS Variables */
+:root {
+  /* ThemeToggle Base Variables */
+  --theme-toggle-transition: var(--cs-transitions-properties-colors);
+  --theme-toggle-icon-size: var(--cs-spacing-scale-md);
+  --theme-toggle-background: transparent;
+
+  /* ThemeToggle Color Variables - using theme-aware design system variables */
+  --theme-toggle-text: var(--cs-colors-text-secondary);
+  --theme-toggle-text-hover: var(--cs-colors-text-primary);
+  --theme-toggle-background-hover: var(--cs-colors-interactive-hover);
+  --theme-toggle-focus-ring: var(--cs-colors-primary);
+
+  /* ThemeToggle State Variables */
+  --theme-toggle-active-background: var(--cs-colors-interactive-active);
+  --theme-toggle-active-text: var(--cs-colors-primary);
+
+  /* ThemeToggle Animation Variables */
+  --theme-toggle-animation-duration: var(--cs-animation-duration-fast);
+  --theme-toggle-animation-easing: var(--cs-animation-easing-ease-out);
+  --theme-toggle-transform-scale: var(--cs-animation-transforms-scale);
+}
+
+/* Base ThemeToggle Styles */
+@layer components {
+
+.theme-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-toggle-text);
+  background-color: var(--theme-toggle-background);
+  transition: var(--theme-toggle-transition);
+  border-radius: var(--cs-border-radius-sm);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+/* ThemeToggle Icon Styles */
+.theme-toggle svg {
+  width: var(--theme-toggle-icon-size);
+  height: var(--theme-toggle-icon-size);
+  transition: var(--theme-toggle-transition);
+  stroke-width: 1.5;
+}
+
+/* ThemeToggle Hover State */
+.theme-toggle:hover {
+  color: var(--theme-toggle-text-hover);
+  background-color: var(--theme-toggle-background-hover);
+  transform: var(--theme-toggle-transform-scale);
+}
+
+.theme-toggle:hover svg {
+  color: var(--theme-toggle-text-hover);
+}
+
+/* ThemeToggle Focus State */
+.theme-toggle:focus-visible {
+  outline: var(--cs-accessibility-focus-ring-width) solid var(--theme-toggle-focus-ring);
+  outline-offset: var(--cs-accessibility-focus-ring-offset);
+}
+
+/* ThemeToggle Active State */
+.theme-toggle:active {
+  background-color: var(--theme-toggle-active-background);
+  color: var(--theme-toggle-active-text);
+  transform: translateY(1px);
+}
+
+/* ThemeToggle Icon Animation */
+.theme-toggle svg {
+  transition: transform var(--theme-toggle-animation-duration) var(--theme-toggle-animation-easing);
+}
+
+.theme-toggle:hover svg {
+  transform: rotate(180deg);
+}
+
+/* Light Mode Icon (Moon) Animation */
+.theme-toggle .moon-icon {
+  transform: rotate(0deg);
+}
+
+.theme-toggle:hover .moon-icon {
+  transform: rotate(-30deg) scale(1.1);
+}
+
+/* Dark Mode Icon (Sun) Animation */
+.theme-toggle .sun-icon {
+  transform: rotate(0deg);
+}
+
+.theme-toggle:hover .sun-icon {
+  transform: rotate(180deg) scale(1.1);
+}
+
+/* Theme transition effects */
+.theme-toggle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, var(--cs-colors-primary), var(--cs-colors-primary-hover));
+  opacity: 0;
+  transition: opacity var(--theme-toggle-animation-duration) var(--theme-toggle-animation-easing);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.theme-toggle:hover::before {
+  opacity: 0.1;
+}
+
+/* Dark mode specific adjustments (these automatically switch via CSS variables) */
+/* No explicit .dark selectors needed - the design system variables handle this */
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .theme-toggle {
+    min-height: 44px;
+    min-width: 44px;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .theme-toggle svg {
+    width: var(--cs-spacing-scale-lg);
+    height: var(--cs-spacing-scale-lg);
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .theme-toggle {
+    border: var(--cs-accessibility-high-contrast-border-width) solid var(--theme-toggle-text);
+  }
+
+  .theme-toggle:focus-visible {
+    outline-width: var(--cs-accessibility-high-contrast-outline-width);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .theme-toggle,
+  .theme-toggle svg,
+  .theme-toggle::before {
+    transition: none;
+    animation: none;
+  }
+
+  .theme-toggle:hover svg {
+    transform: none;
+  }
+}
+
+/* Print styles */
+@media print {
+  .theme-toggle {
+    display: none; /* Hide theme toggle in print */
+  }
+}
+
+/* ThemeToggle accessibility enhancements */
+.theme-toggle[aria-pressed="true"] {
+  background-color: var(--theme-toggle-active-background);
+  color: var(--theme-toggle-active-text);
+}
+
+.theme-toggle[aria-pressed="true"]::before {
+  opacity: 0.15;
+}
+
+/* Loading state */
+.theme-toggle[data-loading="true"] {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.theme-toggle[data-loading="true"] svg {
+  animation: spin var(--cs-animation-duration-slow) linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+} /* End @layer components */

package/src/styles/layers/index.css

@@ -12,40 +12,19 @@
 
 @layer reset, base, themes, components, utilities, overrides;
 
-/* Reset layer - CSS reset and normalization */
-@layer reset {
-  @import '../base/reset.css';
-}
-
-/* Base layer - foundational styles */
-@layer base {
-  @import '../base/typography.css';
-  @import '../base/variables.css';
-}
-
-/* Themes layer - theme-specific variables and styles */
-@layer themes {
-  @import '../themes/index.css';
-}
-
-/* Components layer - all UI component styles */
-@layer components {
-  @import '../components/base/index.css';
-  @import '../components/navigation/index.css';
-  @import '../components/data-display/index.css';
-  @import '../components/feedback/index.css';
-  @import '../components/overlay/index.css';
-}
-
-/* Utilities layer - utility classes and system styles */
-@layer utilities {
-  @import '../utilities/index.css';
-}
-
-/* Overrides layer - highest priority application-specific overrides */
-@layer overrides {
-  @import './overrides.css';
-}
+/* Modern CSS layers syntax - imports with layer assignment */
+@import '../base/reset.css' layer(reset);
+@import '../base/typography.css' layer(base);
+@import '../base/variables.css' layer(base);
+@import '../themes/index.css' layer(themes);
+@import '../components/base/index.css' layer(components);
+@import '../components/ui/index.css' layer(components);
+@import '../components/navigation/index.css' layer(components);
+@import '../components/data-display/index.css' layer(components);
+@import '../components/feedback/index.css' layer(components);
+@import '../components/overlay/index.css' layer(components);
+@import '../utilities/index.css' layer(utilities);
+@import './overrides.css' layer(overrides);
 
 /* Development validation tools (only in development) */
 /* @import './validation.css'; */

package/src/styles/utilities/design-system-utilities.css

@@ -0,0 +1,95 @@
+/* Design System Utilities */
+/* Custom utility classes for design system integration */
+
+@layer utilities {
+  /* Custom Focus Ring Utilities */
+  .focus\:ring-cs-primary {
+    --tw-ring-color: var(--cs-colors-primary);
+  }
+
+  .focus\:ring-cs-secondary {
+    --tw-ring-color: var(--cs-colors-secondary-500);
+  }
+
+  .focus\:ring-cs-info {
+    --tw-ring-color: var(--cs-colors-semantic-info);
+  }
+
+  .focus\:ring-cs-success {
+    --tw-ring-color: var(--cs-colors-semantic-success);
+  }
+
+  .focus\:ring-cs-warning {
+    --tw-ring-color: var(--cs-colors-semantic-warning);
+  }
+
+  .focus\:ring-cs-error {
+    --tw-ring-color: var(--cs-colors-semantic-error);
+  }
+
+  /* Custom Border Color Utilities */
+  .focus\:border-cs-primary {
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--cs-colors-primary-500-rgb) / var(--tw-border-opacity));
+  }
+
+  .focus\:border-cs-secondary {
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--cs-colors-secondary-500-rgb) / var(--tw-border-opacity));
+  }
+
+  /* Custom Background Color Utilities */
+  .bg-cs-primary {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-primary);
+  }
+
+  .bg-cs-secondary {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-secondary-500);
+  }
+
+  .bg-cs-surface-bg {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-surface-background);
+  }
+
+  /* Custom Text Color Utilities */
+  .text-cs-text-primary {
+    --tw-text-opacity: 1;
+    color: var(--cs-colors-text-primary);
+  }
+
+  .text-cs-text-secondary {
+    --tw-text-opacity: 1;
+    color: var(--cs-colors-text-secondary);
+  }
+
+  /* Custom Border Utilities */
+  .border-cs-border {
+    --tw-border-opacity: 1;
+    border-color: var(--cs-colors-border);
+  }
+
+  /* Custom Hover State Utilities */
+  .hover\:bg-cs-secondary-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-secondary-400);
+  }
+
+  .hover\:bg-cs-primary-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-primary-hover);
+  }
+
+  /* Custom Active State Utilities */
+  .active\:bg-cs-secondary-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-secondary-600);
+  }
+
+  .active\:bg-cs-primary-active:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--cs-colors-primary-active);
+  }
+}

package/src/styles/utilities/index.css

@@ -17,4 +17,7 @@
 @import './enterprise-mobile-experience.css';
 @import './semantic-input-system.css';
 
+/* Design system integration utilities */
+@import './design-system-utilities.css';
+
 /* Additional utility classes would be added here */