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

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

@@ -0,0 +1,774 @@
+/* Button Component Styles */
+/* Using semantic CSS architecture with CSS variables and BEM methodology */
+
+/* Button Component CSS Variables */
+:root {
+  /* Button Base Variables */
+  --button-height-sm: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-md));
+  --button-height-md: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
+  --button-height-lg: var(--cs-spacing-scale-3xl);
+  --button-height-icon: calc(var(--cs-spacing-scale-2xl) + var(--cs-spacing-scale-lg));
+  --button-height-mobile: var(--cs-spacing-scale-3xl);
+  
+  --button-padding-y-sm: var(--cs-spacing-scale-sm);
+  --button-padding-x-sm: var(--cs-spacing-scale-md);
+  --button-padding-y-md: var(--cs-spacing-scale-md);
+  --button-padding-x-md: var(--cs-spacing-scale-lg);
+  --button-padding-y-lg: var(--cs-spacing-scale-lg);
+  --button-padding-x-lg: var(--cs-spacing-scale-xl);
+  --button-padding-icon: var(--cs-spacing-scale-sm);
+  --button-padding-mobile-y: var(--cs-spacing-scale-lg);
+  --button-padding-mobile-x: var(--cs-spacing-scale-xl);
+  
+  --button-font-size-sm: var(--cs-fonts-primary-sizes-sm);
+  --button-font-size-md: var(--cs-fonts-primary-sizes-base);
+  --button-font-size-lg: var(--cs-fonts-primary-sizes-lg);
+  --button-font-size-mobile: var(--cs-fonts-primary-sizes-base);
+  
+  --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-secondary);
+  --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: var(--button-link-hover-underline-thickness);
+  
+  /* Button Interactive State Variables */
+  --button-focus-outline: var(--button-focus-outline-width) solid var(--cs-colors-interactive-focus);
+  --button-focus-offset: var(--button-focus-offset);
+  --button-focus-visible-outline: var(--button-focus-visible-outline-width) solid var(--cs-colors-interactive-focus);
+  --button-focus-visible-offset: var(--button-focus-visible-offset);
+  
+  --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: var(--button-disabled-opacity);
+  --button-disabled-cursor: var(--button-disabled-cursor);
+  
+  /* 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 */
+  --button-mobile-breakpoint: var(--cs-breakpoints-mobile);
+  --button-tablet-breakpoint: var(--cs-breakpoints-tablet);
+  --button-desktop-breakpoint: var(--cs-breakpoints-desktop);
+  
+  /* 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 */
+.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 */
+.button--size-sm {
+  height: var(--button-height-sm);
+  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
+  font-size: var(--button-font-size-sm);
+  border-radius: var(--button-border-radius);
+}
+
+.button--size-md {
+  height: var(--button-height-md);
+  padding: var(--button-padding-y-md) var(--button-padding-x-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-y-lg) var(--button-padding-x-lg);
+  font-size: var(--button-font-size-lg);
+  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 {
+  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);
+}
+
+.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: var(--cs-breakpoints-tablet)) {
+  .button-responsive-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+
+/* Container Queries for Adaptive Layouts */
+@container (min-width: var(--cs-breakpoints-tablet)) {
+  .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;
+  }
+}