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

package/src/styles/base/typography.css

@@ -0,0 +1,68 @@
+/* Typography - Base Layer */
+/* Base typography styles using design system variables */
+
+body {
+  font-family: var(--cs-fonts-body-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+  font-size: var(--cs-fonts-body-size, 16px);
+  font-weight: var(--cs-fonts-body-weight, 400);
+  line-height: var(--cs-fonts-body-line-height, 1.5);
+  color: var(--cs-colors-text-primary, #0f172a);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--cs-fonts-heading-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+  font-weight: var(--cs-fonts-heading-weight, 600);
+  line-height: var(--cs-fonts-heading-line-height, 1.2);
+  color: var(--cs-colors-text-primary, #0f172a);
+  margin-bottom: var(--cs-spacing-scale-3, 0.75rem);
+}
+
+h1 {
+  font-size: var(--cs-fonts-heading-h1-size, 2.25rem);
+}
+
+h2 {
+  font-size: var(--cs-fonts-heading-h2-size, 1.875rem);
+}
+
+h3 {
+  font-size: var(--cs-fonts-heading-h3-size, 1.5rem);
+}
+
+h4 {
+  font-size: var(--cs-fonts-heading-h4-size, 1.25rem);
+}
+
+h5 {
+  font-size: var(--cs-fonts-heading-h5-size, 1.125rem);
+}
+
+h6 {
+  font-size: var(--cs-fonts-heading-h6-size, 1rem);
+}
+
+p {
+  margin-bottom: var(--cs-spacing-scale-3, 0.75rem);
+}
+
+a {
+  color: var(--cs-colors-primary, #3b82f6);
+  text-decoration: underline;
+}
+
+a:hover {
+  color: var(--cs-colors-primary-hover, #2563eb);
+}
+
+code {
+  font-family: var(--cs-fonts-mono-family, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
+  font-size: var(--cs-fonts-mono-size, 0.875rem);
+  background-color: var(--cs-colors-surface-secondary, #f1f5f9);
+  padding: var(--cs-spacing-scale-1, 0.25rem) var(--cs-spacing-scale-2, 0.5rem);
+  border-radius: var(--cs-border-radius-sm, 0.25rem);
+}

package/src/styles/base/variables.css

@@ -0,0 +1,5 @@
+/* CSS Variables - Base Layer */
+/* Import theme variables from generated files */
+
+@import '../generated-theme-variables.css';
+@import './fonts.css';

package/src/styles/components/CLAUDE.md

@@ -0,0 +1,62 @@
+# CSS Rules and Best Practices
+
+## Core Principles
+- Only use the design system variables, do not use any generic or tailwind variables
+- Follow semantic CSS architecture with BEM methodology
+- Maintain consistency across all components
+- Ensure accessibility and responsive design
+
+## Design System Integration
+- **Colors**: Always use `var(--cs-colors-*)` variables instead of hardcoded hex values
+- **Spacing**: Use `var(--cs-spacing-scale-*)` for margins, padding, and gaps
+- **Typography**: Use `var(--cs-fonts-*)` for font sizes, weights, and families
+- **Shadows**: Use `var(--cs-shadows-*)` for box-shadow values
+- **Border Radius**: Use `var(--cs-border-radius-*)` for border-radius values
+- **Transitions**: Use `var(--cs-transitions-*)` for animation durations and easing
+
+## Responsive Design Rules
+- **Media Queries**: Use hardcoded breakpoints (e.g., `@media (min-width: 768px)`) instead of CSS variables
+- **CSS Variables in Media Queries**: Never use `var(--cs-breakpoints-*)` inside `@media` rules - this will break
+- **Breakpoint Values**: 
+  - Mobile: 640px
+  - Tablet: 768px
+  - Desktop: 1024px
+  - Wide: 1280px
+  - Ultra: 1536px
+- **Container Queries**: Consider using `@container` for component-level responsiveness when appropriate
+
+## CSS Architecture
+- **Component Isolation**: Each component should have its own CSS file
+- **CSS Import Strategy**: Use direct JavaScript imports in Storybook instead of CSS `@import` statements
+- **CSS Specificity**: Use `!important` sparingly and only when necessary to override conflicting styles
+- **CSS Variables**: Define component-specific variables with fallbacks: `var(--component-var, fallback-value)`
+
+## Storybook Compatibility
+- **CSS Loading**: Import CSS files directly in `.storybook/preview.tsx` for reliable loading
+- **Theme CSS Generation**: Ensure theme CSS generator runs in Storybook builds
+- **CSS Processing**: Avoid PostCSS-dependent features like `@custom-media` unless explicitly configured
+- **CSS Variables**: All design system variables must be available before component CSS loads
+
+## Component Styling Patterns
+- **Flexbox Layouts**: Use `display: flex` with `flex-wrap: wrap` for responsive button grids
+- **Grid Layouts**: Use CSS Grid for responsive column layouts
+- **Gap Management**: Use design system spacing variables for consistent gaps
+- **Width Management**: Set `width: 100%` on flex containers to ensure proper wrapping behavior
+
+## Error Prevention
+- **No Hardcoded Values**: Never use values like `1rem`, `#ffffff`, `768px` directly in CSS
+- **Fallback Values**: Always provide fallback values in CSS variable declarations
+- **Type Safety**: Ensure all design system variables are properly typed in TypeScript interfaces
+- **Build Validation**: Run `npm run build` and `npm test` after any CSS changes
+
+## Performance Considerations
+- **CSS Generation**: Use build-time CSS generation from TypeScript theme definitions
+- **CSS Imports**: Minimize CSS imports to only necessary files
+- **CSS Variables**: Leverage CSS variables for runtime theme switching
+- **CSS Optimization**: Ensure generated CSS is optimized and minified in production builds
+
+## Testing and Validation
+- **Storybook Testing**: Test all responsive behaviors in Storybook viewport modes
+- **Cross-Browser**: Ensure CSS works across different browsers and devices
+- **Theme Switching**: Test light/dark mode switching in Storybook
+- **Responsive Behavior**: Verify breakpoint behavior at exact pixel values

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

@@ -0,0 +1,428 @@
+/* Badge Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Badge Component CSS Variables */
+:root {
+  /* Badge Base Variables */
+  --badge-height: var(--cs-spacing-scale-lg);
+  --badge-padding-y: var(--cs-spacing-scale-xs);
+  --badge-padding-x: var(--cs-spacing-scale-sm);
+  --badge-font-size: var(--cs-fonts-primary-sizes-xs);
+  --badge-font-weight: var(--cs-fonts-primary-weights-semibold);
+  --badge-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --badge-border-width: var(--cs-spacing-scale-xs);
+  --badge-border-radius: var(--cs-border-radius-full);
+  --badge-transition: var(--cs-transitions-properties-colors);
+  
+  /* Badge Variant Variables - Using Original Poker Project Colors */
+  --badge-default-background: var(--cs-colors-primary-500);
+  --badge-default-text: var(--cs-colors-text-inverse);
+  --badge-default-border: var(--cs-colors-border-transparent);
+  
+  --badge-secondary-background: var(--cs-colors-surface-surface);
+  --badge-secondary-text: var(--cs-colors-text-primary);
+  --badge-secondary-border: var(--cs-colors-border-transparent);
+  
+  --badge-destructive-background: var(--cs-colors-semantic-error);
+  --badge-destructive-text: var(--cs-colors-text-inverse);
+  --badge-destructive-border: var(--cs-colors-border-transparent);
+  
+  --badge-outline-background: var(--cs-colors-border-transparent);
+  --badge-outline-text: var(--cs-colors-text-primary);
+  --badge-outline-border: var(--cs-colors-border-transparent);
+  
+  /* Badge Hover State Variables - Using Original Poker Project Colors */
+--badge-default-hover: var(--cs-colors-primary-hover);
+--badge-secondary-hover: var(--cs-colors-interactive-hover);
+--badge-destructive-hover: var(--cs-colors-semantic-error-dark);
+--badge-outline-hover: var(--cs-colors-interactive-hover);
+--badge-outline-hover-border: var(--cs-colors-border-transparent);
+  
+  /* Badge Interactive State Variables */
+  --badge-hover-transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+  --badge-hover-shadow: var(--cs-shadows-md);
+  --badge-focus-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --badge-focus-offset: var(--cs-spacing-scale-xs);
+  --badge-active-transform: translateY(0);
+  --badge-active-shadow: var(--cs-shadows-sm);
+  --badge-focus-ring-outline: var(--cs-spacing-scale-xs) solid var(--cs-colors-interactive-focus);
+  --badge-focus-ring-offset: var(--cs-spacing-scale-xs);
+  
+  /* Badge High Contrast Variables */
+  --badge-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  --badge-outline-high-contrast-border-width: var(--cs-spacing-scale-xs);
+  
+  /* Badge Responsive Variables */
+  --badge-mobile-font-size: var(--cs-fonts-primary-sizes-xs);
+  --badge-mobile-padding-y: var(--cs-spacing-scale-xs);
+  --badge-mobile-padding-x: var(--cs-spacing-scale-sm);
+  --badge-container-font-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Badge Size Variables */
+  --badge-sm-height: var(--cs-spacing-scale-md);
+  --badge-sm-padding-y: var(--cs-spacing-scale-xs);
+  --badge-sm-padding-x: var(--cs-spacing-scale-sm);
+  --badge-sm-font-size: var(--cs-fonts-primary-sizes-xs);
+  
+  --badge-lg-height: var(--cs-spacing-scale-xl);
+  --badge-lg-padding-y: var(--cs-spacing-scale-sm);
+  --badge-lg-padding-x: var(--cs-spacing-scale-sm);
+  --badge-lg-font-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Badge Element Variables */
+  --badge-icon-margin: var(--cs-spacing-scale-xs);
+  --badge-icon-size: var(--cs-fonts-primary-sizes-sm);
+  
+  /* Badge Showcase Variables */
+  --badge-showcase-gap: var(--cs-spacing-scale-md);
+  --badge-status-showcase-gap: var(--cs-spacing-scale-sm);
+  --badge-status-item-gap: var(--cs-spacing-scale-sm);
+  --badge-status-text-size: var(--cs-fonts-primary-sizes-sm);
+  --badge-notification-text-size: var(--cs-fonts-primary-sizes-sm);
+  --badge-category-title-size: var(--cs-fonts-primary-sizes-lg);
+  --badge-category-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --badge-category-grid-gap: var(--cs-spacing-scale-sm);
+  --badge-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --badge-responsive-title-size: var(--cs-fonts-primary-sizes-md);
+  --badge-responsive-title-weight: var(--cs-fonts-primary-weights-medium);
+  --badge-responsive-badges-gap: var(--cs-spacing-scale-sm);
+}
+
+/* Base Badge Component - Using Original Poker Project Styling */
+.badge {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  
+  /* Sizing */
+  min-height: var(--cs-spacing-scale-lg);
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  
+  /* Typography */
+  font-family: var(--cs-fonts-primary-family);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  line-height: var(--cs-fonts-primary-line-heights-tight);
+  
+  /* Visual Styling */
+  border: var(--cs-spacing-scale-xs) solid var(--cs-colors-border-transparent);
+  border-radius: var(--cs-border-radius-full);
+  
+  /* Transitions */
+  transition: var(--cs-transitions-properties-colors);
+  
+  /* Focus Management */
+  outline: none;
+  cursor: default;
+}
+
+/* Badge Variants - Using Original Poker Project Colors */
+.badge--default {
+  background-color: var(--badge-default-background, var(--cs-colors-primary-500));
+  color: var(--badge-default-text, var(--cs-colors-text-inverse));
+  border-color: var(--badge-default-border);
+}
+
+.badge--secondary {
+  background-color: var(--badge-secondary-background, var(--cs-colors-surface-surface));
+  color: var(--badge-secondary-text, var(--cs-colors-text-primary));
+  border-color: var(--badge-secondary-border, var(--cs-colors-surface-border));
+}
+
+.badge--destructive {
+  background-color: var(--badge-destructive-background, var(--cs-colors-semantic-error));
+  color: var(--badge-destructive-text, var(--cs-colors-text-inverse));
+  border-color: var(--badge-destructive-border, var(--cs-colors-semantic-error));
+}
+
+.badge--outline {
+  background-color: var(--badge-outline-background);
+  color: var(--badge-outline-text, var(--cs-colors-text-primary));
+  border-color: var(--badge-outline-border, var(--cs-colors-surface-border));
+}
+
+/* Interactive States - Using Original Poker Project Colors */
+.badge[tabindex]:hover,
+.badge[role="button"]:hover,
+.badge[role="link"]:hover {
+  transform: var(--badge-hover-transform, translateY(calc(-1 * var(--cs-spacing-scale-xs))));
+  box-shadow: var(--badge-hover-shadow, var(--cs-shadows-md));
+}
+
+/* Hover States for Specific Variants - Matching Original Project */
+.badge--default:hover {
+  background-color: var(--badge-default-hover, var(--cs-colors-primary-hover));
+}
+
+.badge--secondary:hover {
+  background-color: var(--badge-secondary-hover, var(--cs-colors-interactive-hover));
+}
+
+.badge--destructive:hover {
+  background-color: var(--badge-destructive-hover);
+}
+
+.badge--outline:hover {
+  background-color: var(--badge-outline-hover, var(--cs-colors-interactive-hover));
+  border-color: var(--badge-outline-hover-border, var(--cs-colors-surface-border));
+}
+
+.badge[tabindex]:focus,
+.badge[role="button"]:focus,
+.badge[role="link"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--cs-spacing-scale-xs) var(--cs-colors-interactive-focus), 0 0 0 var(--cs-spacing-scale-sm) var(--cs-colors-text-inverse);
+}
+
+.badge[tabindex]:active,
+.badge[role="button"]:active,
+.badge[role="link"]:active {
+  transform: var(--badge-active-transform, translateY(0));
+  box-shadow: var(--badge-active-shadow, var(--cs-shadow-sm));
+}
+
+/* Focus Ring for Accessibility */
+.badge:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--cs-spacing-scale-xs) var(--cs-colors-interactive-focus), 0 0 0 var(--cs-spacing-scale-sm) var(--cs-colors-text-inverse);
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .badge {
+    border-width: var(--badge-high-contrast-border-width);
+  }
+  
+  .badge--outline {
+    border-width: var(--badge-outline-high-contrast-border-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .badge {
+    transition: none;
+  }
+  
+  .badge[tabindex]:hover,
+  .badge[role="button"]:hover,
+  .badge[role="link"]:hover {
+    transform: none;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .badge {
+    font-size: var(--badge-mobile-font-size, var(--cs-fonts-primary-sizes-xs));
+    padding: var(--badge-mobile-padding-y, var(--cs-spacing-scale-xs)) var(--badge-mobile-padding-x, var(--cs-spacing-scale-sm));
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .badge {
+    font-size: var(--badge-container-font-size, var(--cs-fonts-primary-sizes-sm));
+  }
+}
+
+/* Badge Element Modifiers */
+.badge__icon {
+  margin-right: var(--badge-icon-margin, var(--cs-spacing-scale-xs));
+  width: var(--badge-icon-size, var(--cs-fonts-primary-sizes-sm));
+  height: var(--badge-icon-size, var(--cs-fonts-primary-sizes-sm));
+  flex-shrink: 0;
+}
+
+.badge__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Badge Size Variants */
+.badge--sm {
+  min-height: var(--badge-sm-height, var(--cs-spacing-scale-md));
+  padding: var(--badge-sm-padding-y, var(--cs-spacing-scale-xs)) var(--badge-sm-padding-x, var(--cs-spacing-scale-sm));
+  font-size: var(--badge-sm-font-size, var(--cs-fonts-primary-sizes-xs));
+}
+
+.badge--lg {
+  min-height: var(--badge-lg-height, var(--cs-spacing-scale-xl));
+  padding: var(--badge-lg-padding-y, var(--cs-spacing-scale-sm)) var(--badge-lg-padding-x, var(--cs-spacing-scale-sm));
+  font-size: var(--badge-lg-font-size, var(--cs-fonts-primary-sizes-sm));
+}
+
+/* Storybook Showcase Styles */
+/* Badge Showcase Layout */
+.badge-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--badge-showcase-gap, var(--cs-spacing-scale-md));
+  align-items: center;
+}
+
+/* Status Badge Showcase */
+.badge-status-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-status-showcase-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-status-item {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-status-item-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-status-text {
+  font-size: var(--badge-status-text-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--cs-text-secondary);
+}
+
+/* Notification Badge Showcase */
+.badge-notification-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-notification-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-notification-item {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-notification-item-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-notification-text {
+  font-size: var(--badge-notification-text-size, var(--cs-fonts-primary-sizes-sm));
+  color: var(--cs-text-secondary);
+}
+
+/* Category Badge Showcase */
+.badge-category-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-category-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-category-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-category-section-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-category-title {
+  font-size: var(--badge-category-title-size, var(--cs-fonts-primary-sizes-lg));
+  font-weight: var(--badge-category-title-weight, var(--cs-fonts-primary-weights-semibold));
+  margin-bottom: var(--badge-category-title-margin, var(--cs-spacing-scale-sm));
+  color: var(--cs-text-primary);
+}
+
+.badge-category-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--badge-category-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+/* Interactive Badge Showcase */
+.badge-interactive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-interactive-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-interactive-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--badge-interactive-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-interactive-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-text-muted);
+}
+
+/* Badge Size Showcase */
+.badge-size-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-size-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-size-grid {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-size-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-size-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-text-muted);
+}
+
+/* Badge Icon Showcase */
+.badge-icon-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-icon-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--badge-icon-grid-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-icon-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-text-muted);
+}
+
+/* Badge Responsive Showcase */
+.badge-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-responsive-gap, var(--cs-spacing-scale-md));
+}
+
+.badge-responsive-description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-text-muted);
+  margin-bottom: var(--badge-responsive-description-margin, var(--cs-spacing-scale-sm));
+}
+
+.badge-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--badge-responsive-grid-gap, var(--cs-spacing-scale-md));
+  width: 100%;
+  max-width: var(--badge-responsive-grid-max-width, var(--cs-spacing-scale-6xl));
+}
+
+.badge-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--badge-responsive-column-gap, var(--cs-spacing-scale-sm));
+}
+
+.badge-responsive-title {
+  font-size: var(--badge-responsive-title-size, var(--cs-fonts-primary-sizes-base));
+  font-weight: var(--badge-responsive-title-weight, var(--cs-fonts-primary-weights-medium));
+  margin-bottom: var(--badge-responsive-title-margin, var(--cs-spacing-scale-sm));
+  color: var(--cs-text-primary);
+}
+
+.badge-responsive-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--badge-responsive-badges-gap, var(--cs-spacing-scale-sm));
+  width: 100%;
+}
+
+/* Responsive Design for Showcase */
+@media (min-width: 768px) {
+  .badge-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}