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

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

@@ -0,0 +1,296 @@
+/* Label Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Label Component CSS Variables */
+:root {
+  /* Label Base Variables */
+  --label-font-size: var(--cs-fonts-primary-sizes-sm);
+  --label-font-weight: var(--cs-fonts-primary-weights-medium);
+  --label-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --label-letter-spacing: var(--cs-fonts-primary-letter-spacing-normal);
+  
+  /* Label Color Variables */
+  --label-color-primary: var(--cs-colors-text-primary);
+  --label-color-secondary: var(--cs-colors-text-secondary);
+  --label-color-muted: var(--cs-colors-text-muted);
+  --label-color-disabled: var(--cs-colors-text-muted);
+  
+  /* Label Spacing Variables */
+  --label-padding-y: var(--cs-spacing-scale-xs);
+  --label-padding-x: var(--cs-spacing-scale-sm);
+  --label-margin-bottom: var(--cs-spacing-scale-xs);
+  
+  /* Label State Variables */
+  --label-transition: var(--cs-transitions-properties-colors);
+  --label-disabled-opacity: var(--cs-accessibility-disabled-opacity);
+  --label-disabled-cursor: var(--cs-accessibility-disabled-cursor);
+  
+  /* Label Focus Variables */
+  --label-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --label-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --label-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  --label-focus-outline-offset: var(--cs-accessibility-outline-offset);
+  
+  /* Label Layout Variables */
+  --label-label-spacing: var(--cs-spacing-scale-sm);
+  --label-group-spacing: var(--cs-spacing-scale-md);
+  
+  /* Label Container Variables */
+  --label-container-width: var(--cs-container-width-medium);
+  --label-container-max-width: var(--cs-container-width-full);
+  --label-container-width-wide: var(--cs-container-width-large);
+  --label-container-width-narrow: var(--cs-container-width-small);
+  --label-container-width-xl: var(--cs-container-width-xl);
+  
+  /* Label Form Layout Variables */
+  --label-form-layout-width: var(--cs-container-width-large);
+  --label-form-layout-max-width: var(--cs-container-width-full);
+  
+  /* Label Accessibility Demo Variables */
+  --label-accessibility-demo-width: var(--cs-container-width-medium);
+  --label-accessibility-demo-max-width: var(--cs-container-width-full);
+  
+  /* Label Responsive Demo Variables */
+  --label-responsive-demo-width: var(--cs-container-width-medium);
+  --label-responsive-demo-max-width: var(--cs-container-width-full);
+}
+
+/* Base Label Styles */
+.label {
+  display: inline-block;
+  font-family: var(--cs-fonts-primary-family), var(--cs-fonts-primary-fallbacks);
+  font-size: var(--label-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: var(--label-line-height);
+  letter-spacing: var(--label-letter-spacing);
+  color: var(--label-color-primary);
+  padding: var(--label-padding-y) var(--label-padding-x);
+  margin-bottom: var(--label-margin-bottom);
+  transition: var(--label-transition);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Label Size Variants */
+.label--small {
+  font-size: var(--cs-fonts-primary-sizes-xs);
+}
+
+.label--large {
+  font-size: var(--cs-fonts-primary-sizes-md);
+}
+
+.label--xl {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+}
+
+/* Label Color Variants */
+.label--primary {
+  color: var(--label-color-primary);
+}
+
+.label--secondary {
+  color: var(--label-color-secondary);
+}
+
+.label--muted {
+  color: var(--label-color-muted);
+}
+
+/* Label State Styles */
+.label:focus {
+  outline: var(--label-focus-ring-width) solid var(--label-focus-ring-color);
+  outline-offset: var(--label-focus-ring-offset);
+}
+
+.label:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Peer State Handling */
+.label:has(+ *:disabled) {
+  color: var(--label-color-disabled);
+  cursor: var(--label-disabled-cursor);
+  opacity: var(--label-disabled-opacity);
+}
+
+/* Label with Required Indicator */
+.label--required::after {
+  content: " *";
+  color: var(--cs-colors-semantic-error);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+/* Label in Form Context */
+.label--form {
+  display: block;
+  width: var(--label-container-width);
+  max-width: var(--label-container-max-width);
+}
+
+/* Label Group Layout */
+.label-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--label-group-spacing);
+}
+
+.label-group--horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--label-label-spacing);
+}
+
+/* Label with Input Layout */
+.label-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--label-label-spacing);
+}
+
+.label-input-group--horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--label-label-spacing);
+}
+
+/* Label with Checkbox Layout */
+.label-checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: var(--label-label-spacing);
+}
+
+/* Responsive Behavior */
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .label-input-group--responsive {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+@media (min-width: var(--cs-breakpoints-desktop)) {
+  .label-input-group--responsive {
+    gap: var(--cs-spacing-scale-md);
+  }
+}
+
+/* Label Container for Stories */
+.label-container {
+  width: var(--cs-container-width-medium);
+  max-width: var(--cs-container-width-full);
+}
+
+.label-container--wide {
+  width: var(--cs-container-width-large);
+}
+
+.label-container--narrow {
+  width: var(--cs-container-width-small);
+}
+
+/* Label Form Layout for Stories */
+.label-form-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+  width: var(--cs-container-width-large);
+  max-width: var(--cs-container-width-full);
+}
+
+/* Label Accessibility Demo */
+.label-accessibility-demo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-lg);
+  width: var(--cs-container-width-medium);
+  max-width: var(--cs-container-width-full);
+}
+
+/* Label Responsive Demo */
+.label-responsive-demo {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--cs-spacing-scale-md);
+  width: var(--cs-container-width-full);
+  max-width: var(--cs-container-width-xl);
+}
+
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .label-responsive-demo {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* Label Styling Variations */
+.label--primary-styled {
+  color: var(--cs-colors-primary-600);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+}
+
+.label--secondary-styled {
+  color: var(--cs-colors-secondary-600);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+}
+
+.label--accent-styled {
+  color: var(--cs-colors-accent);
+  font-weight: var(--cs-fonts-primary-weights-bold);
+}
+
+/* Label with Icon */
+.label--with-icon {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-xs);
+}
+
+/* Label Error State */
+.label--error {
+  color: var(--cs-colors-semantic-error);
+}
+
+/* Label Success State */
+.label--success {
+  color: var(--cs-colors-semantic-success);
+}
+
+/* Label Warning State */
+.label--warning {
+  color: var(--cs-colors-semantic-warning);
+}
+
+/* Label Info State */
+.label--info {
+  color: var(--cs-colors-semantic-info);
+}
+
+/* Label Hover Effects */
+.label:hover:not(:has(+ *:disabled)) {
+  color: var(--cs-colors-primary-600);
+}
+
+/* Label Active State */
+.label:active:not(:has(+ *:disabled)) {
+  transform: translateY(1px);
+}
+
+/* Label Disabled State */
+.label:has(+ *:disabled) {
+  pointer-events: none;
+}
+
+/* Label Focus Visible */
+.label:focus-visible {
+  outline: var(--label-focus-ring-width) solid var(--label-focus-ring-color);
+  outline-offset: var(--label-focus-ring-offset);
+  border-radius: var(--cs-border-radius-sm);
+}
+
+/* Label Print Styles */
+@media print {
+  .label {
+    color: var(--cs-print-text-color);
+    background: var(--cs-print-background-color);
+  }
+}

package/src/styles/components/data-display/chart.css

@@ -0,0 +1,353 @@
+/* Chart Component Styles */
+/* Semantic CSS architecture following BEM methodology */
+
+/* ============================================================================ */
+/* CHART CONTAINER */
+/* ============================================================================ */
+
+.chart {
+  --chart-bg: var(--cs-colors-surface-background);
+  --chart-border: var(--cs-colors-surface-border);
+  --chart-radius: var(--cs-border-radius-md);
+  --chart-shadow: var(--cs-shadows-sm);
+  --chart-spacing: var(--cs-spacing-scale-4);
+}
+
+.chart__container {
+  position: relative;
+  background-color: var(--chart-bg);
+  border: var(--cs-border-width-normal) solid var(--chart-border);
+  border-radius: var(--chart-radius);
+  box-shadow: var(--chart-shadow);
+  overflow: hidden;
+}
+
+/* Chart container sizes */
+.chart__container--sm {
+  min-height: var(--cs-spacing-scale-40);
+  padding: var(--cs-spacing-scale-3);
+}
+
+.chart__container--md {
+  min-height: var(--cs-spacing-scale-64);
+  padding: var(--chart-spacing);
+}
+
+.chart__container--lg {
+  min-height: var(--cs-spacing-scale-80);
+  padding: var(--cs-spacing-scale-6);
+}
+
+/* Chart variants */
+.chart__container--bordered {
+  border-width: var(--cs-border-width-thick);
+  border-color: var(--cs-colors-primary-500);
+}
+
+.chart__container--striped {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--chart-bg),
+    var(--chart-bg) var(--cs-spacing-scale-2-5),
+    var(--cs-colors-surface-surface) var(--cs-spacing-scale-2-5),
+    var(--cs-colors-surface-surface) var(--cs-spacing-scale-5)
+  );
+}
+
+/* ============================================================================ */
+/* CHART HEADER */
+/* ============================================================================ */
+
+.chart__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--chart-spacing);
+  padding-bottom: var(--cs-spacing-scale-2);
+  border-bottom: var(--cs-border-width-normal) solid var(--cs-colors-surface-divider);
+}
+
+.chart__title {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+  margin: 0;
+}
+
+.chart__subtitle {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  color: var(--cs-colors-text-secondary);
+  margin: var(--cs-spacing-scale-1) 0 0;
+}
+
+.chart__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+}
+
+/* ============================================================================ */
+/* CHART CANVAS */
+/* ============================================================================ */
+
+.chart__canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart__canvas canvas {
+  max-width: 100%;
+  height: auto;
+}
+
+/* ============================================================================ */
+/* CHART LEGEND */
+/* ============================================================================ */
+
+.chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cs-spacing-scale-3);
+  margin-top: var(--chart-spacing);
+  padding-top: var(--cs-spacing-scale-2);
+  border-top: var(--cs-border-width-normal) solid var(--cs-colors-surface-divider);
+}
+
+.chart__legend--sm {
+  gap: var(--cs-spacing-scale-2);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+}
+
+.chart__legend--md {
+  gap: var(--cs-spacing-scale-3);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+}
+
+.chart__legend--lg {
+  gap: var(--cs-spacing-scale-4);
+  font-size: var(--cs-fonts-primary-sizes-base);
+}
+
+.chart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+  cursor: pointer;
+  transition: var(--cs-transitions-properties-colors);
+}
+
+.chart__legend-item:hover {
+  color: var(--cs-colors-primary-600);
+}
+
+.chart__legend-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chart__legend-color {
+  width: var(--cs-spacing-scale-3);
+  height: var(--cs-spacing-scale-3);
+  border-radius: var(--cs-border-radius-full);
+  flex-shrink: 0;
+}
+
+.chart__legend-label {
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  color: var(--cs-colors-text-primary);
+}
+
+/* ============================================================================ */
+/* CHART STATES */
+/* ============================================================================ */
+
+.chart__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--cs-spacing-scale-32);
+  color: var(--cs-colors-text-secondary);
+}
+
+.chart__loading-spinner {
+  width: var(--cs-spacing-scale-8);
+  height: var(--cs-spacing-scale-8);
+  border: var(--cs-border-width-heavy) solid var(--cs-colors-surface-divider);
+  border-top: var(--cs-border-width-heavy) solid var(--cs-colors-primary-500);
+  border-radius: var(--cs-border-radius-full);
+  animation: chart-loading-spin var(--cs-transitions-durations-slow) linear infinite;
+}
+
+@keyframes chart-loading-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.chart__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--cs-spacing-scale-32);
+  color: var(--cs-colors-semantic-error-500);
+  text-align: center;
+  padding: var(--chart-spacing);
+}
+
+.chart__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--cs-spacing-scale-32);
+  color: var(--cs-colors-text-muted);
+  text-align: center;
+  padding: var(--chart-spacing);
+}
+
+.chart__empty-icon {
+  width: var(--cs-spacing-scale-16);
+  height: var(--cs-spacing-scale-16);
+  margin-bottom: var(--cs-spacing-scale-4);
+  opacity: 0.5;
+}
+
+/* ============================================================================ */
+/* CHART TOOLTIPS */
+/* ============================================================================ */
+
+.chart__tooltip {
+  position: absolute;
+  background-color: var(--cs-colors-surface-background);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  border-radius: var(--cs-border-radius-md);
+  box-shadow: var(--cs-shadows-lg);
+  padding: var(--cs-spacing-scale-3);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.chart__tooltip-title {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+  margin-bottom: var(--cs-spacing-scale-1);
+}
+
+.chart__tooltip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-2);
+  margin-bottom: var(--cs-spacing-scale-1);
+}
+
+.chart__tooltip-item:last-child {
+  margin-bottom: 0;
+}
+
+.chart__tooltip-color {
+  width: var(--cs-spacing-scale-2);
+  height: var(--cs-spacing-scale-2);
+  border-radius: var(--cs-border-radius-full);
+  flex-shrink: 0;
+}
+
+.chart__tooltip-label {
+  color: var(--cs-colors-text-secondary);
+}
+
+.chart__tooltip-value {
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  color: var(--cs-colors-text-primary);
+  margin-left: auto;
+}
+
+/* ============================================================================ */
+/* CHART TYPES */
+/* ============================================================================ */
+
+.chart--line .chart__canvas {
+  min-height: var(--cs-spacing-scale-48);
+}
+
+.chart--bar .chart__canvas {
+  min-height: var(--cs-spacing-scale-56);
+}
+
+.chart--pie .chart__canvas {
+  min-height: var(--cs-spacing-scale-64);
+}
+
+.chart--doughnut .chart__canvas {
+  min-height: var(--cs-spacing-scale-64);
+}
+
+.chart--area .chart__canvas {
+  min-height: var(--cs-spacing-scale-48);
+}
+
+/* ============================================================================ */
+/* RESPONSIVE DESIGN */
+/* ============================================================================ */
+
+@media (max-width: 640px) {
+  .chart__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--cs-spacing-scale-2);
+  }
+
+  .chart__legend {
+    flex-direction: column;
+    gap: var(--cs-spacing-scale-2);
+  }
+
+  .chart__container--sm {
+    min-height: var(--cs-spacing-scale-32);
+    padding: var(--cs-spacing-scale-2);
+  }
+
+  .chart__container--md {
+    min-height: var(--cs-spacing-scale-48);
+    padding: var(--cs-spacing-scale-3);
+  }
+
+  .chart__container--lg {
+    min-height: var(--cs-spacing-scale-56);
+    padding: var(--chart-spacing);
+  }
+}
+
+/* ============================================================================ */
+/* ACCESSIBILITY */
+/* ============================================================================ */
+
+.chart__container:focus-within {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+}
+
+.chart__legend-item:focus {
+  outline: var(--cs-border-width-thick) solid var(--cs-colors-interactive-focus);
+  outline-offset: var(--cs-spacing-scale-0-5);
+  border-radius: var(--cs-border-radius-sm);
+}
+
+/* ============================================================================ */
+/* PRINT STYLES */
+/* ============================================================================ */
+
+@media print {
+  .chart__container {
+    box-shadow: none;
+    border: var(--cs-border-width-normal) solid #000;
+  }
+
+  .chart__loading,
+  .chart__error {
+    display: none;
+  }
+}