@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,980 @@
+/* Button Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Button Component CSS Variables */
+:root {
+  /* Button Base Variables - Phase 2 Enhancement: Aligned with specification */
+  /* Button Size Specifications (5-tier system) */
+  --button-height-xs: 32px;
+  --button-height-sm: 36px;
+  --button-height-md: 40px;  /* default */
+  --button-height-lg: 44px;
+  --button-height-xl: 48px;
+  --button-height-icon: var(--button-height-md);
+  --button-height-mobile: var(--button-height-lg);
+
+  /* Button Padding Specifications */
+  --button-padding-xs: 6px 12px;
+  --button-padding-sm: 8px 16px;
+  --button-padding-md: 10px 20px;  /* default */
+  --button-padding-lg: 12px 24px;
+  --button-padding-xl: 14px 28px;
+  --button-padding-icon: var(--cs-spacing-scale-sm);
+  --button-padding-mobile: var(--button-padding-lg);
+
+  /* Individual padding values for density calculations */
+  --button-padding-xs-y: 6px;
+  --button-padding-xs-x: 12px;
+  --button-padding-sm-y: 8px;
+  --button-padding-sm-x: 16px;
+  --button-padding-md-y: 10px;
+  --button-padding-md-x: 20px;
+  --button-padding-lg-y: 12px;
+  --button-padding-lg-x: 24px;
+  --button-padding-xl-y: 14px;
+  --button-padding-xl-x: 28px;
+
+  /* Legacy variables for backward compatibility */
+  --button-padding-y-sm: 8px;
+  --button-padding-x-sm: 16px;
+  --button-padding-y-md: 10px;
+  --button-padding-x-md: 20px;
+  --button-padding-y-lg: 12px;
+  --button-padding-x-lg: 24px;
+  --button-padding-mobile-y: 12px;
+  --button-padding-mobile-x: 24px;
+
+  /* Button Font Size Specifications */
+  --button-font-size-xs: 14px;
+  --button-font-size-sm: 14px;
+  --button-font-size-md: 16px;  /* default */
+  --button-font-size-lg: 16px;
+  --button-font-size-xl: 18px;
+  --button-font-size-mobile: 16px;
+  
+  --button-font-weight: var(--cs-fonts-primary-weights-medium);
+  --button-line-height: var(--cs-fonts-primary-line-heights-tight);
+  --button-border-radius: var(--cs-border-radius-md);
+  --button-transition: var(--cs-transitions-properties-colors);
+  --button-gap: var(--cs-spacing-scale-sm);
+  
+  /* Button Variant Variables */
+  --button-default-background: var(--cs-colors-primary-500);
+  --button-default-text: var(--cs-colors-text-on-primary);
+  --button-default-border: var(--cs-colors-primary-500);
+  --button-default-shadow: var(--cs-shadows-sm);
+  
+  --button-primary-background: var(--cs-colors-primary-500);
+  --button-primary-text: var(--cs-colors-text-on-primary);
+  --button-primary-border: var(--cs-colors-primary-500);
+  --button-primary-shadow: var(--cs-shadows-sm);
+  
+  --button-secondary-background: var(--cs-colors-secondary-100);
+  --button-secondary-text: var(--cs-colors-text-primary);
+  --button-secondary-border: var(--cs-colors-border);
+  --button-secondary-shadow: var(--cs-shadows-sm);
+  
+  --button-outline-background: transparent;
+  --button-outline-text: var(--cs-colors-text-primary);
+  --button-outline-border: var(--cs-colors-border);
+  --button-outline-shadow: var(--cs-shadows-sm);
+  
+  --button-ghost-background: transparent;
+  --button-ghost-text: var(--cs-colors-text-primary);
+  --button-ghost-border: transparent;
+  --button-ghost-shadow: none;
+  
+  --button-destructive-background: var(--cs-colors-semantic-error);
+  --button-destructive-text: var(--cs-colors-text-inverse);
+  --button-destructive-border: var(--cs-colors-semantic-error);
+  --button-destructive-shadow: var(--cs-shadows-sm);
+  
+  --button-link-background: transparent;
+  --button-link-text: var(--cs-colors-primary-500);
+  --button-link-border: none;
+  --button-link-shadow: none;
+  --button-link-padding-y: var(--cs-spacing-scale-sm);
+  --button-link-padding-x: var(--cs-spacing-scale-md);
+  --button-link-underline-offset: var(--cs-spacing-scale-xs);
+  
+  /* Button Hover State Variables */
+  --button-default-hover-background: var(--cs-colors-primary-hover);
+  --button-default-hover-border: var(--cs-colors-primary-hover);
+  --button-default-hover-shadow: var(--cs-shadows-md);
+  
+  --button-primary-hover-background: var(--cs-colors-primary-hover);
+  --button-primary-hover-border: var(--cs-colors-primary-hover);
+  --button-primary-hover-shadow: var(--cs-shadows-md);
+  
+  --button-secondary-hover-background: var(--cs-colors-interactive-hover);
+  --button-secondary-hover-border: var(--cs-colors-primary-500);
+  --button-secondary-hover-shadow: var(--cs-shadows-md);
+  
+  --button-outline-hover-background: var(--cs-colors-interactive-hover);
+  --button-outline-hover-border: var(--cs-colors-primary-500);
+  --button-outline-hover-shadow: var(--cs-shadows-md);
+  
+  --button-ghost-hover-background: var(--cs-colors-interactive-hover);
+  --button-ghost-hover-text: var(--cs-colors-text-primary);
+  --button-ghost-hover-shadow: var(--cs-shadows-sm);
+  
+  --button-destructive-hover-background: var(--cs-colors-semantic-error-dark);
+  --button-destructive-hover-border: var(--cs-colors-semantic-error-dark);
+  --button-destructive-hover-shadow: var(--cs-shadows-md);
+  
+  --button-link-hover-text: var(--cs-colors-primary-hover);
+  --button-link-hover-underline-thickness: 2px;
+  
+  /* Button Interactive State Variables */
+  --button-focus-outline: var(--button-focus-outline-width) solid var(--cs-colors-interactive-focus);
+  --button-focus-offset: 2px;
+  --button-focus-visible-outline: var(--button-focus-visible-outline-width) solid var(--cs-colors-interactive-focus);
+  --button-focus-visible-offset: 2px;
+  
+  --button-active-transform: scale(0.98);
+  --button-active-shadow: var(--cs-shadows-sm);
+  
+  --button-hover-transform: translateY(calc(-1 * var(--cs-spacing-scale-xs)));
+  --button-hover-shadow: var(--cs-shadows-md);
+  
+  /* Button State Variables */
+  --button-loading-color: transparent;
+  --button-loading-spinner-size: var(--cs-spacing-scale-lg);
+  --button-loading-spinner-animation: spin 1s linear infinite;
+  
+  --button-disabled-background: var(--cs-colors-interactive-disabled);
+  --button-disabled-text: var(--cs-colors-text-muted);
+  --button-disabled-border: var(--cs-colors-interactive-disabled);
+  --button-disabled-opacity: 0.6;
+  --button-disabled-cursor: not-allowed;
+  
+  /* Button Element Variables */
+  --button-icon-size: var(--cs-spacing-scale-lg);
+  --button-icon-pointer-events: var(--button-icon-pointer-events);
+  --button-icon-flex-shrink: var(--button-icon-flex-shrink);
+  
+  --button-content-gap: var(--cs-spacing-scale-sm);
+  
+  --button-spinner-size: var(--cs-spacing-scale-lg);
+  --button-spinner-animation: spin 1s linear infinite;
+  
+  /* Button Accessibility Variables */
+  --button-touch-target-min-height: var(--button-touch-target-min-height);
+  --button-touch-target-min-width: var(--button-touch-target-min-width);
+  --button-touch-target-breakpoint: var(--button-touch-target-breakpoint);
+  
+  --button-high-contrast-border-width: var(--button-high-contrast-border-width);
+  --button-high-contrast-focus-outline-width: var(--button-high-contrast-focus-outline-width);
+  
+  /* Button Focus Variables */
+  --button-focus-outline-width: var(--cs-border-width-focus);
+  --button-focus-visible-outline-width: var(--cs-border-width-focus);
+  --button-focus-offset: var(--cs-border-width-focus);
+  --button-focus-visible-offset: var(--cs-border-width-focus);
+  
+  /* Button Link Variables */
+  --button-link-hover-underline-thickness: var(--cs-border-width-focus);
+  
+  /* Button Icon Variables */
+  --button-icon-pointer-events: none;
+  --button-icon-flex-shrink: 0;
+  
+  /* Button Disabled Variables */
+  --button-disabled-cursor: not-allowed;
+  --button-disabled-opacity: 0.6;
+  
+  /* Button Responsive Variables - Enhanced with Phase 1 breakpoints */
+  --button-xs-breakpoint: var(--cs-breakpoints-xs);
+  --button-sm-breakpoint: var(--cs-breakpoints-sm);
+  --button-md-breakpoint: var(--cs-breakpoints-md);
+  --button-lg-breakpoint: var(--cs-breakpoints-lg);
+  --button-xl-breakpoint: var(--cs-breakpoints-xl);
+  --button-2xl-breakpoint: var(--cs-breakpoints-2xl);
+  --button-3xl-breakpoint: var(--cs-breakpoints-3xl);
+
+  /* Button Density-Aware Variables */
+  --button-density-compact-scale: 0.875;
+  --button-density-comfortable-scale: 1.0;
+  --button-density-spacious-scale: 1.125;
+
+  /* Legacy Responsive Variables (for backward compatibility) */
+  --button-mobile-breakpoint: var(--cs-breakpoints-sm);
+  --button-tablet-breakpoint: var(--cs-breakpoints-md);
+  --button-desktop-breakpoint: var(--cs-breakpoints-lg);
+  
+  /* Button Showcase Variables */
+  --button-showcase-gap: var(--cs-spacing-scale-md);
+  --button-variant-showcase-gap: var(--cs-spacing-scale-md);
+  --button-size-showcase-gap: var(--cs-spacing-scale-md);
+  --button-state-showcase-gap: var(--cs-spacing-scale-md);
+  --button-responsive-showcase-gap: var(--cs-spacing-scale-md);
+  
+  --button-showcase-title-size: var(--cs-fonts-primary-sizes-lg);
+  --button-showcase-title-weight: var(--cs-fonts-primary-weights-semibold);
+  --button-showcase-description-size: var(--cs-fonts-primary-sizes-sm);
+  --button-showcase-description-color: var(--cs-colors-text-muted);
+  
+  --button-showcase-grid-gap: var(--cs-spacing-scale-sm);
+  --button-responsive-grid-gap: var(--cs-spacing-scale-md);
+  --button-responsive-grid-max-width: var(--cs-spacing-scale-6xl);
+}
+
+/* Base Button Component */
+@layer components {
+
+.button {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-gap);
+  
+  /* Sizing */
+  border-radius: var(--button-border-radius);
+  
+  /* Typography */
+  font-family: var(--cs-fonts-primary-family);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  
+  /* Visual Styling */
+  border: none;
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  
+  /* Transitions */
+  transition: var(--button-transition);
+  
+  /* Interactive States */
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+}
+
+/* Button Elements */
+.button__icon {
+  pointer-events: var(--button-icon-pointer-events);
+  flex-shrink: var(--button-icon-flex-shrink);
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+}
+
+.button__content {
+  display: flex;
+  align-items: center;
+  gap: var(--button-content-gap);
+}
+
+.button__spinner {
+  width: var(--button-spinner-size);
+  height: var(--button-spinner-size);
+  animation: var(--button-spinner-animation);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Button Size Variants - Phase 2 Enhancement: Complete 5-tier system */
+.button--size-xs {
+  height: var(--button-height-xs);
+  padding: var(--button-padding-xs);
+  font-size: var(--button-font-size-xs);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-sm {
+  height: var(--button-height-sm);
+  padding: var(--button-padding-sm);
+  font-size: var(--button-font-size-sm);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-default,
+.button--size-md {
+  height: var(--button-height-md);
+  padding: var(--button-padding-md);
+  font-size: var(--button-font-size-md);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-lg {
+  height: var(--button-height-lg);
+  padding: var(--button-padding-lg);
+  font-size: var(--button-font-size-lg);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-xl {
+  height: var(--button-height-xl);
+  padding: var(--button-padding-xl);
+  font-size: var(--button-font-size-xl);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-icon {
+  height: var(--button-height-icon);
+  width: var(--button-height-icon);
+  padding: var(--button-padding-icon);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-mobile {
+  height: var(--button-height-mobile);
+  padding: var(--button-padding-mobile-y) var(--button-padding-mobile-x);
+  font-size: var(--button-font-size-mobile);
+  border-radius: var(--button-border-radius);
+}
+
+/* Button Variants */
+.button--variant-default {
+  background-color: var(--button-default-background);
+  color: var(--button-default-text);
+  border: var(--cs-border-width-normal) solid var(--button-default-border);
+  box-shadow: var(--button-default-shadow);
+}
+
+.button--variant-default:hover {
+  background-color: var(--button-default-hover-background);
+  border-color: var(--button-default-hover-border);
+  box-shadow: var(--button-default-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-default:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-default:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-primary {
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-text);
+  border: var(--cs-border-width-normal) solid var(--button-primary-border);
+  box-shadow: var(--button-primary-shadow);
+}
+
+.button--variant-primary:hover {
+  background-color: var(--button-primary-hover-background);
+  border-color: var(--button-primary-hover-border);
+  box-shadow: var(--button-primary-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-primary:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-primary:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-secondary {
+  background-color: var(--button-secondary-background);
+  color: var(--button-secondary-text);
+  border: var(--cs-border-width-normal) solid var(--button-secondary-border);
+  box-shadow: var(--button-secondary-shadow);
+}
+
+.button--variant-secondary:hover {
+  background-color: var(--button-secondary-hover-background);
+  border-color: var(--button-secondary-hover-border);
+  box-shadow: var(--button-secondary-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-secondary:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-secondary:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-outline {
+  background-color: var(--button-outline-background);
+  color: var(--button-outline-text);
+  border: var(--cs-border-width-normal) solid var(--button-outline-border);
+  box-shadow: var(--button-outline-shadow);
+}
+
+.button--variant-outline:hover {
+  background-color: var(--button-outline-hover-background);
+  border-color: var(--button-outline-hover-border);
+  box-shadow: var(--button-outline-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-outline:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-outline:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-ghost {
+  background-color: var(--button-ghost-background);
+  color: var(--button-ghost-text);
+  border: var(--cs-border-width-normal) solid var(--button-ghost-border);
+  box-shadow: var(--button-ghost-shadow);
+}
+
+.button--variant-ghost:hover {
+  background-color: var(--button-ghost-hover-background);
+  color: var(--button-ghost-hover-text);
+  box-shadow: var(--button-ghost-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-ghost:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-ghost:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-destructive {
+  background-color: var(--button-destructive-background);
+  color: var(--button-destructive-text);
+  border: var(--cs-border-width-normal) solid var(--button-destructive-border);
+  box-shadow: var(--button-destructive-shadow);
+}
+
+.button--variant-destructive:hover {
+  background-color: var(--button-destructive-hover-background);
+  border-color: var(--button-destructive-hover-border);
+  box-shadow: var(--button-destructive-hover-shadow);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-destructive:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-destructive:active {
+  transform: var(--button-active-transform);
+  box-shadow: var(--button-active-shadow);
+}
+
+.button--variant-link {
+  background-color: var(--button-link-background);
+  color: var(--button-link-text);
+  text-decoration: underline;
+  text-underline-offset: var(--button-link-underline-offset);
+  border: var(--button-link-border);
+  box-shadow: var(--button-link-shadow);
+  padding: var(--button-link-padding-y) var(--button-link-padding-x);
+}
+
+.button--variant-link:hover {
+  color: var(--button-link-hover-text);
+  text-decoration-thickness: var(--button-link-hover-underline-thickness);
+  transform: var(--button-hover-transform);
+}
+
+.button--variant-link:focus {
+  outline: var(--button-focus-outline);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button--variant-link:active {
+  transform: var(--button-active-transform);
+}
+
+/* Button States */
+.button--state-loading {
+  position: relative;
+  color: var(--button-loading-color);
+}
+
+.button--state-loading .button__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentColor;
+}
+
+.button--state-disabled {
+  background-color: var(--button-disabled-background);
+  color: var(--button-disabled-text);
+  border-color: var(--button-disabled-border);
+  cursor: var(--button-disabled-cursor);
+  opacity: var(--button-disabled-opacity);
+  box-shadow: none;
+}
+
+.button--state-disabled:hover {
+  background-color: var(--button-disabled-background);
+  border-color: var(--button-disabled-border);
+  box-shadow: none;
+}
+
+/* Focus Management */
+.button:focus-visible {
+  outline: var(--button-focus-visible-outline);
+  outline-offset: var(--button-focus-visible-offset);
+}
+
+/* Touch Target Compliance */
+@media (max-width: var(--button-touch-target-breakpoint)) {
+  .button {
+    min-height: var(--button-touch-target-min-height);
+    min-width: var(--button-touch-target-min-width);
+  }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .button {
+    border-width: var(--button-high-contrast-border-width);
+  }
+  
+  .button:focus {
+    outline-width: var(--button-high-contrast-focus-outline-width);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  
+  .button__spinner {
+    animation: none;
+  }
+}
+
+/* Dark Mode Support */
+.dark .button--variant-default,
+.dark .button--variant-primary {
+  background-color: var(--cs-modes-dark-colors-primary-500);
+  border-color: var(--cs-modes-dark-colors-primary-500);
+}
+
+.dark .button--variant-default:hover,
+.dark .button--variant-primary:hover {
+  background-color: var(--cs-modes-dark-colors-primary-hover);
+  border-color: var(--cs-modes-dark-colors-primary-hover);
+}
+
+.dark .button--variant-secondary {
+  background-color: var(--cs-modes-dark-colors-secondary-100);
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .button--variant-outline {
+  border-color: var(--cs-modes-dark-colors-border);
+}
+
+.dark .button--variant-ghost {
+  background-color: transparent;
+}
+
+.dark .button--variant-ghost:hover {
+  background-color: var(--cs-modes-dark-colors-interactive-hover);
+}
+
+.dark .button--variant-destructive {
+  background-color: var(--cs-modes-dark-colors-semantic-error);
+  border-color: var(--cs-modes-dark-colors-semantic-error);
+}
+
+.dark .button--variant-link {
+  color: var(--cs-modes-dark-colors-primary-500);
+}
+
+.dark .button--variant-link:hover {
+  color: var(--cs-modes-dark-colors-primary-hover);
+}
+
+/* Storybook Showcase Styles */
+/* Button Showcase Layout */
+.button-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--button-showcase-gap);
+  align-items: center;
+}
+
+/* Button Variant Showcase */
+.button-variant-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-variant-showcase-gap);
+}
+
+.button-variant-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-variant-title {
+  font-size: var(--button-showcase-title-size);
+  font-weight: var(--button-showcase-title-weight);
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.button-variant-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-variant-description {
+  font-size: var(--button-showcase-description-size);
+  color: var(--button-showcase-description-color);
+}
+
+/* Button Size Showcase */
+.button-size-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-size-showcase-gap);
+}
+
+.button-size-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-size-title {
+  font-size: var(--button-showcase-title-size);
+  font-weight: var(--button-showcase-title-weight);
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.button-size-grid {
+  display: flex;
+  align-items: center;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-size-description {
+  font-size: var(--button-showcase-description-size);
+  color: var(--button-showcase-description-color);
+}
+
+/* Button State Showcase */
+.button-state-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-state-showcase-gap);
+}
+
+.button-state-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-state-title {
+  font-size: var(--button-showcase-title-size);
+  font-weight: var(--button-showcase-title-weight);
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.button-state-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-state-description {
+  font-size: var(--button-showcase-description-size);
+  color: var(--button-showcase-description-color);
+}
+
+/* Button Icon Showcase */
+.button-icon-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-showcase-gap);
+}
+
+.button-icon-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-icon-title {
+  font-size: var(--button-showcase-title-size);
+  font-weight: var(--button-showcase-title-weight);
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.button-icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--button-showcase-grid-gap);
+}
+
+.button-icon-description {
+  font-size: var(--button-showcase-description-size);
+  color: var(--button-showcase-description-color);
+}
+
+/* Button Responsive Showcase */
+.button-responsive-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-responsive-showcase-gap);
+}
+
+.button-responsive-description {
+  font-size: var(--button-showcase-description-size);
+  color: var(--button-showcase-description-color);
+  margin-bottom: var(--cs-spacing-scale-sm);
+}
+
+.button-responsive-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--button-responsive-grid-gap);
+  width: 100%;
+  max-width: var(--button-responsive-grid-max-width);
+}
+
+.button-responsive-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cs-spacing-scale-sm);
+}
+
+.button-responsive-title {
+  font-size: var(--button-showcase-title-size);
+  font-weight: var(--button-showcase-title-weight);
+  margin-bottom: var(--cs-spacing-scale-sm);
+  color: var(--cs-colors-text-primary);
+}
+
+.button-responsive-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--button-showcase-grid-gap);
+  width: 100%;
+}
+
+/* Full-width button utility for responsive design */
+.button--full-width {
+  width: 100%;
+}
+
+/* Responsive Design for Showcase */
+@media (min-width: 768px) {
+  .button-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: 768px) {
+  .button-showcase {
+    gap: var(--cs-spacing-scale-lg);
+  }
+  
+  .button-variant-grid,
+  .button-size-grid,
+  .button-state-grid,
+  .button-icon-grid {
+    gap: var(--cs-spacing-scale-md);
+  }
+}
+
+/* High Contrast Mode Support for Showcase */
+@media (prefers-contrast: high) {
+  .button-variant-title,
+  .button-size-title,
+  .button-state-title,
+  .button-icon-title,
+  .button-responsive-title {
+    border-bottom: var(--button-high-contrast-border-width) solid var(--cs-colors-text-primary);
+    padding-bottom: var(--cs-spacing-scale-xs);
+  }
+}
+
+/* Reduced Motion Support for Showcase */
+@media (prefers-reduced-motion: reduce) {
+  .button-showcase,
+  .button-variant-showcase,
+  .button-size-showcase,
+  .button-state-showcase,
+  .button-icon-showcase,
+  .button-responsive-showcase {
+    transition: none;
+  }
+}
+
+/* Phase 2 Enhancement: Integration with new breakpoints and density system */
+
+/* Enhanced Responsive Design - Progressive Touch Target Optimization */
+/* xs breakpoint (475px): Large phones - use compact density */
+@media (max-width: 475px) {
+  .button {
+    min-height: calc(var(--button-height-mobile) * var(--button-density-compact-scale));
+    padding: calc(var(--button-padding-mobile-y) * var(--button-density-compact-scale)) calc(var(--button-padding-mobile-x) * var(--button-density-compact-scale));
+    font-size: calc(var(--button-font-size-mobile) * var(--button-density-compact-scale));
+    /* Ensure 48px minimum touch target on mobile */
+    min-height: 48px;
+  }
+
+  .button--size-sm {
+    min-height: 44px;
+    padding: calc(var(--button-padding-sm-y) * var(--button-density-compact-scale)) calc(var(--button-padding-sm-x) * var(--button-density-compact-scale));
+  }
+
+  .button--size-lg {
+    min-height: 52px;
+    padding: calc(var(--button-padding-lg-y) * var(--button-density-compact-scale)) calc(var(--button-padding-lg-x) * var(--button-density-compact-scale));
+  }
+}
+
+/* sm breakpoint (640px): Small tablets - transition from compact to comfortable */
+@media (min-width: 641px) and (max-width: 767px) {
+  .button {
+    min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+    padding: calc(var(--button-padding-y-md) * var(--button-density-comfortable-scale)) calc(var(--button-padding-x-md) * var(--button-density-comfortable-scale));
+    font-size: calc(var(--button-font-size-md) * var(--button-density-comfortable-scale));
+    /* 46px touch target for small tablets */
+    min-height: 46px;
+  }
+}
+
+/* md breakpoint (768px): Tablets - comfortable density */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .button {
+    min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+    padding: calc(var(--button-padding-y-md) * var(--button-density-comfortable-scale)) calc(var(--button-padding-x-md) * var(--button-density-comfortable-scale));
+    font-size: var(--button-font-size-md);
+    /* 44px touch target for tablets */
+    min-height: 44px;
+  }
+}
+
+/* lg breakpoint (1024px): Desktop - spacious density */
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale)) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale));
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+    /* 42px touch target for desktop */
+    min-height: 42px;
+  }
+
+  /* Enable hover effects on desktop */
+  .button:hover {
+    transform: var(--button-hover-transform);
+    box-shadow: var(--button-hover-shadow);
+  }
+}
+
+/* xl breakpoint (1280px): Large desktop - enhanced spacious */
+@media (min-width: 1280px) and (max-width: 1535px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale)) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale));
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+    /* 40px touch target for large desktop */
+    min-height: 40px;
+  }
+}
+
+/* 2xl breakpoint (1536px): Ultra-wide - optimized spacious */
+@media (min-width: 1536px) and (max-width: 1919px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale) * 1.05);
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale) * 1.05) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale) * 1.05);
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale) * 1.025);
+    /* 38px touch target for ultra-wide */
+    min-height: 38px;
+  }
+}
+
+/* 3xl breakpoint (1920px): Large displays - maximum spacious */
+@media (min-width: 1920px) {
+  .button {
+    min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale) * 1.1);
+    padding: calc(var(--button-padding-y-lg) * var(--button-density-spacious-scale) * 1.1) calc(var(--button-padding-x-lg) * var(--button-density-spacious-scale) * 1.1);
+    font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale) * 1.05);
+    /* 36px touch target for large displays */
+    min-height: 36px;
+  }
+
+  /* Enhanced interaction on large displays */
+  .button:hover {
+    transform: var(--button-hover-transform) scale(1.02);
+  }
+}
+
+/* Density-aware button variants for optimal touch targets */
+.button--density-compact {
+  min-height: calc(var(--button-height-md) * var(--button-density-compact-scale));
+  padding: calc(var(--button-padding-md-y) * var(--button-density-compact-scale)) calc(var(--button-padding-md-x) * var(--button-density-compact-scale));
+  font-size: calc(var(--button-font-size-md) * var(--button-density-compact-scale));
+}
+
+.button--density-comfortable {
+  min-height: calc(var(--button-height-md) * var(--button-density-comfortable-scale));
+  padding: calc(var(--button-padding-md-y) * var(--button-density-comfortable-scale)) calc(var(--button-padding-md-x) * var(--button-density-comfortable-scale));
+  font-size: calc(var(--button-font-size-md) * var(--button-density-comfortable-scale));
+}
+
+.button--density-spacious {
+  min-height: calc(var(--button-height-lg) * var(--button-density-spacious-scale));
+  padding: calc(var(--button-padding-lg-y) * var(--button-density-spacious-scale)) calc(var(--button-padding-lg-x) * var(--button-density-spacious-scale));
+  font-size: calc(var(--button-font-size-lg) * var(--button-density-spacious-scale));
+}
+
+/* Progressive enhancement for pointer devices */
+@media (hover: hover) and (pointer: fine) {
+  .button:hover {
+    transform: var(--button-hover-transform);
+    box-shadow: var(--button-hover-shadow);
+  }
+}
+
+/* Touch-friendly enhancements for coarse pointers */
+@media (pointer: coarse) {
+  .button {
+    /* Ensure minimum 44px touch targets on touch devices */
+    min-height: max(44px, var(--button-height-md));
+    min-width: 44px;
+  }
+
+  .button--size-sm {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .button--size-xs {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+} /* End @layer components */