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

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

@@ -0,0 +1,442 @@
+/* Checkbox Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Checkbox Component CSS Variables */
+:root {
+  /* Checkbox Base Variables */
+  --checkbox-size-base: var(--cs-spacing-scale-md);
+  --checkbox-size-small: var(--cs-spacing-scale-sm);
+  --checkbox-size-large: var(--cs-spacing-scale-lg);
+  --checkbox-border-width: var(--cs-border-width-normal);
+  --checkbox-border-radius: var(--cs-border-radius-sm);
+  --checkbox-transition: var(--cs-transitions-properties-colors);
+  
+  /* Checkbox Focus Variables */
+  --checkbox-focus-ring-width: var(--cs-accessibility-focus-ring-width);
+  --checkbox-focus-ring-offset: var(--cs-accessibility-focus-ring-offset);
+  --checkbox-focus-ring-color: var(--cs-accessibility-focus-ring-color);
+  
+  /* Checkbox State Variables */
+  --checkbox-disabled-opacity: var(--cs-colors-interactive-disabled);
+  --checkbox-disabled-cursor: var(--cs-accessibility-disabled-cursor, not-allowed);
+  --checkbox-checked-color: var(--cs-colors-primary-500);
+  --checkbox-unchecked-color: var(--cs-colors-surface-border);
+  --checkbox-hover-color: var(--cs-colors-primary-400);
+  --checkbox-active-color: var(--cs-colors-primary-600);
+  
+  /* Checkbox Animation Variables */
+  --checkbox-transform-check: var(--cs-animation-transforms-scale);
+  --checkbox-animation-duration: var(--cs-animation-duration-fast);
+  --checkbox-animation-easing: var(--cs-animation-easing-ease-out);
+  
+  /* Checkbox Layout Variables */
+  --checkbox-label-spacing: var(--cs-spacing-scale-sm);
+  --checkbox-group-spacing: var(--cs-spacing-scale-md);
+  --checkbox-container-width: calc(var(--cs-spacing-scale-6xl) * 2.667);
+  --checkbox-container-max-width: 100%;
+}
+
+/* Checkbox Base Styles */
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-size-base);
+  height: var(--checkbox-size-base);
+  border: var(--checkbox-border-width) solid var(--checkbox-unchecked-color);
+  border-radius: var(--checkbox-border-radius);
+  background-color: transparent;
+  cursor: pointer;
+  transition: var(--checkbox-transition);
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.checkbox:hover {
+  border-color: var(--checkbox-hover-color);
+  background-color: var(--cs-colors-interactive-hover);
+}
+
+.checkbox:active {
+  border-color: var(--checkbox-active-color);
+  background-color: var(--cs-colors-interactive-active);
+}
+
+.checkbox:focus {
+  outline: none;
+  border-color: var(--checkbox-focus-ring-color);
+  box-shadow: 0 0 0 var(--checkbox-focus-ring-width) var(--checkbox-focus-ring-color);
+}
+
+.checkbox:checked {
+  background-color: var(--checkbox-checked-color);
+  border-color: var(--checkbox-checked-color);
+}
+
+.checkbox:checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--cs-spacing-scale-lg);
+  height: var(--cs-spacing-scale-lg);
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--checkbox-animation-duration) var(--checkbox-animation-easing);
+}
+
+.checkbox:checked:hover::after {
+  transform: translate(-50%, -50%) var(--checkbox-transform-check);
+}
+
+.checkbox:disabled {
+  opacity: var(--cs-accessibility-disabled-opacity);
+  cursor: var(--checkbox-disabled-cursor);
+  background-color: var(--cs-colors-interactive-disabled);
+  border-color: var(--cs-colors-interactive-disabled);
+}
+
+.checkbox:disabled:hover {
+  border-color: var(--cs-colors-interactive-disabled);
+  background-color: var(--cs-colors-interactive-disabled);
+}
+
+.checkbox:disabled:checked {
+  background-color: var(--cs-colors-interactive-disabled);
+  border-color: var(--cs-colors-interactive-disabled);
+}
+
+/* Checkbox Sizes */
+.checkbox--small {
+  width: var(--checkbox-size-small);
+  height: var(--checkbox-size-small);
+}
+
+.checkbox--large {
+  width: var(--checkbox-size-large);
+  height: var(--checkbox-size-large);
+}
+
+.checkbox--large::after {
+  width: calc(var(--cs-spacing-scale-lg) + var(--cs-spacing-scale-xs));
+  height: calc(var(--cs-spacing-scale-lg) + var(--cs-spacing-scale-xs));
+}
+
+/* Checkbox Label */
+.checkbox__label {
+  margin-left: var(--checkbox-label-spacing);
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  font-weight: var(--cs-fonts-primary-weights-normal);
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  color: var(--cs-colors-text-primary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox__label--disabled {
+  color: var(--cs-colors-text-muted);
+  cursor: var(--checkbox-disabled-cursor);
+}
+
+/* Checkbox Group */
+.checkbox-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--checkbox-label-spacing);
+}
+
+.checkbox-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--checkbox-group-spacing);
+}
+
+/* Checkbox Container */
+.checkbox-container {
+  width: var(--checkbox-container-width);
+  max-width: var(--checkbox-container-max-width);
+  padding: var(--cs-spacing-scale-md);
+  background-color: var(--cs-colors-surface-surface);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  border-radius: var(--cs-border-radius-md);
+}
+
+/* Checkbox Row */
+.checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-label-spacing);
+  padding: var(--cs-spacing-scale-sm) 0;
+}
+
+.checkbox-row--disabled {
+  opacity: var(--cs-accessibility-disabled-opacity);
+  cursor: var(--checkbox-disabled-cursor);
+}
+
+/* Checkbox Description */
+.checkbox__description {
+  margin-left: calc(var(--checkbox-size-base) + var(--checkbox-label-spacing));
+  margin-top: var(--cs-spacing-scale-xs);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  color: var(--cs-colors-text-muted);
+}
+
+/* Checkbox Error State */
+.checkbox--error {
+  border-color: var(--cs-colors-semantic-error);
+}
+
+.checkbox--error:focus {
+  border-color: var(--cs-colors-semantic-error);
+  box-shadow: 0 0 0 var(--checkbox-focus-ring-width) var(--cs-colors-semantic-error);
+}
+
+.checkbox__error-message {
+  margin-left: calc(var(--checkbox-size-base) + var(--checkbox-label-spacing));
+  margin-top: var(--cs-spacing-scale-xs);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  color: var(--cs-colors-semantic-error);
+}
+
+/* Checkbox Success State */
+.checkbox--success {
+  border-color: var(--cs-colors-semantic-success);
+}
+
+.checkbox--success:focus {
+  border-color: var(--cs-colors-semantic-success);
+  box-shadow: 0 0 0 var(--checkbox-focus-ring-width) var(--cs-colors-semantic-success);
+}
+
+/* Checkbox Animation Keyframes */
+@keyframes checkbox-check {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+.checkbox:checked::after {
+  animation: checkbox-check var(--checkbox-animation-duration) var(--checkbox-animation-easing);
+}
+
+/* Checkbox Focus Ring Animation */
+@keyframes checkbox-focus-ring {
+  0% {
+    box-shadow: 0 0 0 0 var(--checkbox-focus-ring-color);
+  }
+  100% {
+    box-shadow: 0 0 0 var(--checkbox-focus-ring-width) var(--checkbox-focus-ring-color);
+  }
+}
+
+.checkbox:focus {
+  animation: checkbox-focus-ring var(--cs-animation-duration-fast) var(--cs-animation-easing-ease-out);
+}
+
+/* Checkbox Hover Animation */
+@keyframes checkbox-hover {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: var(--checkbox-transform-check);
+  }
+}
+
+.checkbox:hover {
+  animation: checkbox-hover var(--cs-animation-duration-fast) var(--cs-animation-easing-ease-out);
+}
+
+/* Responsive Design */
+@media (max-width: var(--cs-breakpoints-mobile)) {
+  .checkbox-container {
+    width: 100%;
+    padding: var(--cs-spacing-scale-sm);
+  }
+  
+  .checkbox-group--horizontal {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--checkbox-group-spacing);
+  }
+}
+
+@media (min-width: var(--cs-breakpoints-tablet)) {
+  .checkbox-container {
+    width: calc(var(--cs-spacing-scale-6xl) * 3.2);
+  }
+}
+
+@media (min-width: var(--cs-breakpoints-desktop)) {
+  .checkbox-container {
+    width: calc(var(--cs-spacing-scale-6xl) * 3.733);
+  }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .checkbox {
+    border-width: var(--cs-accessibility-high-contrast-border-width);
+  }
+  
+  .checkbox:focus {
+    outline: var(--cs-accessibility-high-contrast-outline-width) solid var(--checkbox-focus-ring-color);
+    outline-offset: var(--cs-accessibility-outline-offset);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .checkbox,
+  .checkbox::after {
+    transition: none;
+    animation: none;
+  }
+  
+  .checkbox:hover {
+    animation: none;
+  }
+  
+  .checkbox:focus {
+    animation: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .checkbox {
+    border-color: var(--cs-print-border-color);
+    background-color: transparent;
+  }
+  
+  .checkbox:checked {
+    background-color: var(--cs-print-border-color);
+  }
+  
+  .checkbox__label {
+    color: var(--cs-print-text-color);
+  }
+  
+  .checkbox__description {
+    color: var(--cs-print-text-secondary-color);
+  }
+}
+
+/* Checkbox Stories Layout Classes */
+.checkbox-stories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-lg);
+  padding: var(--cs-spacing-scale-lg);
+  background-color: var(--cs-colors-surface-background);
+  border-radius: var(--cs-border-radius-lg);
+  box-shadow: var(--cs-shadows-lg);
+}
+
+.checkbox-stories__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-md);
+  padding: var(--cs-spacing-scale-md);
+  background-color: var(--cs-colors-surface-surface);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  border-radius: var(--cs-border-radius-md);
+}
+
+.checkbox-stories__title {
+  font-size: var(--cs-fonts-primary-sizes-lg);
+  font-weight: var(--cs-fonts-primary-weights-semibold);
+  line-height: var(--cs-fonts-primary-line-heights-tight);
+  color: var(--cs-colors-text-primary);
+  margin: 0 0 var(--cs-spacing-scale-sm) 0;
+}
+
+.checkbox-stories__description {
+  font-size: var(--cs-fonts-primary-sizes-sm);
+  line-height: var(--cs-fonts-primary-line-heights-normal);
+  color: var(--cs-colors-text-muted);
+  margin: 0 0 var(--cs-spacing-scale-md) 0;
+}
+
+.checkbox-stories__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc(var(--cs-spacing-scale-6xl) * 1.667), 1fr));
+  gap: var(--cs-spacing-scale-md);
+}
+
+.checkbox-stories__item {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-label-spacing);
+  padding: var(--cs-spacing-scale-sm);
+  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-sm);
+  transition: var(--cs-transitions-properties-colors);
+}
+
+.checkbox-stories__item:hover {
+  background-color: var(--cs-colors-interactive-hover);
+  border-color: var(--cs-colors-primary-300);
+}
+
+.checkbox-stories__code {
+  font-family: var(--cs-fonts-mono-family);
+  font-size: var(--cs-fonts-mono-sizes-xs);
+  line-height: var(--cs-fonts-mono-line-heights-normal);
+  color: var(--cs-colors-text-muted);
+  background-color: var(--cs-colors-surface-surface);
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  border-radius: var(--cs-border-radius-sm);
+  border: var(--cs-border-width-normal) solid var(--cs-colors-surface-border);
+  margin-top: var(--cs-spacing-scale-sm);
+}
+
+.checkbox-stories__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cs-spacing-scale-xs);
+  font-size: var(--cs-fonts-primary-sizes-xs);
+  font-weight: var(--cs-fonts-primary-weights-medium);
+  padding: var(--cs-spacing-scale-xs) var(--cs-spacing-scale-sm);
+  border-radius: var(--cs-border-radius-sm);
+  margin-top: var(--cs-spacing-scale-sm);
+}
+
+.checkbox-stories__status--success {
+  background-color: var(--cs-colors-semantic-success);
+  color: var(--cs-colors-text-on-primary);
+}
+
+.checkbox-stories__status--warning {
+  background-color: var(--cs-colors-semantic-warning);
+  color: var(--cs-colors-text-on-primary);
+}
+
+.checkbox-stories__status--error {
+  background-color: var(--cs-colors-semantic-error);
+  color: var(--cs-colors-text-on-primary);
+}
+
+.checkbox-stories__status--info {
+  background-color: var(--cs-colors-semantic-info);
+  color: var(--cs-colors-text-on-primary);
+}

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

@@ -0,0 +1,9 @@
+/* Base Components */
+/* Core UI components used throughout the application */
+
+@import './badge.css';
+@import './button.css';
+@import './card.css';
+@import './checkbox.css';
+@import './input.css';
+@import './label.css';