@fpkit/acss 3.8.0 → 3.9.0

package/src/components/checkbox/checkbox.scss

@@ -1,432 +0,0 @@
-/* ============================================================================
-   Checkbox Component Styles
-   ============================================================================
-
-   Accessible checkbox component with size and color variants.
-   All measurements use rem units (1rem = 16px).
-   All color variants meet WCAG 2.1 AA contrast requirements (4.5:1 minimum).
-
-   CSS Variable Naming Convention:
-   --checkbox-{element}-{variant}-{property}-{modifier}
-
-   Approved abbreviations: bg, fs, fw, radius, gap
-   Full words for: padding, margin, color, border, display, width, height
-   ========================================================================= */
-
-:root {
-  /* ==========================================================================
-     Size Tokens
-     ========================================================================== */
-
-  --checkbox-size-sm: 1rem; /* 16px */
-  --checkbox-size-md: 1.25rem; /* 20px */
-  --checkbox-size-lg: 1.5rem; /* 24px */
-
-  /* ==========================================================================
-     Base Properties
-     ========================================================================== */
-
-  --checkbox-size: var(--checkbox-size-md);
-  --checkbox-bg: #ffffff;
-  --checkbox-border: 0.125rem solid #6b7280; /* 2px border */
-  --checkbox-border-color: #6b7280; /* Gray 500 */
-  --checkbox-radius: 0.25rem; /* 4px */
-  --checkbox-cursor: pointer;
-  --checkbox-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* ==========================================================================
-     Checkmark Indicator
-     ========================================================================== */
-
-  --checkbox-checkmark-color: #ffffff;
-  --checkbox-checkmark-opacity: 0;
-  --checkbox-checkmark-transform: scale(0.7);
-
-  /* ==========================================================================
-     Label Properties
-     ========================================================================== */
-
-  --checkbox-label-gap: 0.5rem; /* 8px */
-  --checkbox-label-fs: 1rem; /* 16px */
-  --checkbox-label-color: inherit;
-  --checkbox-label-cursor: pointer;
-  --checkbox-label-fw: 400;
-
-  /* ==========================================================================
-     Description Properties
-     ========================================================================== */
-
-  --checkbox-description-fs: 0.875rem; /* 14px */
-  --checkbox-description-color: #6b7280; /* Gray 500 */
-  --checkbox-description-margin-block-start: 0.25rem; /* 4px */
-  --checkbox-description-padding-inline-start: calc(
-    var(--checkbox-size) + var(--checkbox-label-gap)
-  );
-
-  /* ==========================================================================
-     Error Message Properties
-     ========================================================================== */
-
-  --checkbox-error-fs: 0.875rem; /* 14px */
-  --checkbox-error-color: #dc2626; /* Red 600 */
-  --checkbox-error-margin-block-start: 0.25rem; /* 4px */
-  --checkbox-error-padding-inline-start: calc(
-    var(--checkbox-size) + var(--checkbox-label-gap)
-  );
-
-  /* ==========================================================================
-     Required Indicator
-     ========================================================================== */
-
-  --checkbox-required-color: #dc2626; /* Red 600 */
-  --checkbox-required-fw: 600;
-
-  /* ==========================================================================
-     Color Variants - WCAG AA Compliant
-     ========================================================================== */
-
-  /* Primary Variant (Blue) */
-  --checkbox-primary-checked-bg: #2563eb; /* Blue 600 - 4.68:1 contrast */
-  --checkbox-primary-checked-border: #2563eb;
-  --checkbox-primary-hover-border: #3b82f6; /* Blue 500 */
-  --checkbox-primary-focus-outline-color: #93c5fd; /* Blue 300 */
-
-  /* Secondary Variant (Gray) */
-  --checkbox-secondary-checked-bg: #4b5563; /* Gray 600 - 7.56:1 contrast */
-  --checkbox-secondary-checked-border: #4b5563;
-  --checkbox-secondary-hover-border: #6b7280; /* Gray 500 */
-  --checkbox-secondary-focus-outline-color: #9ca3af; /* Gray 400 */
-
-  /* Error Variant (Red) */
-  --checkbox-error-checked-bg: #dc2626; /* Red 600 - 5.14:1 contrast */
-  --checkbox-error-checked-border: #dc2626;
-  --checkbox-error-hover-border: #ef4444; /* Red 500 */
-  --checkbox-error-focus-outline-color: #fca5a5; /* Red 300 */
-
-  /* Success Variant (Green) */
-  --checkbox-success-checked-bg: #16a34a; /* Green 600 - 4.54:1 contrast */
-  --checkbox-success-checked-border: #16a34a;
-  --checkbox-success-hover-border: #22c55e; /* Green 500 */
-  --checkbox-success-focus-outline-color: #86efac; /* Green 300 */
-
-  /* ==========================================================================
-     State Variables
-     ========================================================================== */
-
-  /* Hover State */
-  --checkbox-hover-border-color: #9ca3af; /* Gray 400 */
-  --checkbox-hover-bg: #f9fafb; /* Gray 50 */
-
-  /* Focus State */
-  --checkbox-focus-outline: 0.125rem solid; /* 2px */
-  --checkbox-focus-outline-offset: 0.125rem; /* 2px */
-  --checkbox-focus-outline-color: var(--checkbox-primary-focus-outline-color);
-
-  /* Checked State */
-  --checkbox-checked-bg: var(--checkbox-primary-checked-bg);
-  --checkbox-checked-border: var(--checkbox-primary-checked-border);
-  --checkbox-checked-checkmark-opacity: 1;
-  --checkbox-checked-checkmark-transform: scale(1);
-
-  /* Indeterminate State */
-  --checkbox-indeterminate-bg: var(--checkbox-primary-checked-bg);
-  --checkbox-indeterminate-border: var(--checkbox-primary-checked-border);
-  --checkbox-indeterminate-dash-width: 0.625rem; /* 10px */
-  --checkbox-indeterminate-dash-height: 0.125rem; /* 2px */
-  --checkbox-indeterminate-dash-opacity: 1;
-
-  /* Disabled State */
-  --checkbox-disabled-bg: #f3f4f6; /* Gray 100 */
-  --checkbox-disabled-border-color: #d1d5db; /* Gray 300 */
-  --checkbox-disabled-opacity: 0.6;
-  --checkbox-disabled-cursor: not-allowed;
-
-  /* Invalid State */
-  --checkbox-invalid-border-color: #dc2626; /* Red 600 */
-  --checkbox-invalid-focus-outline-color: #fca5a5; /* Red 300 */
-}
-
-/* ============================================================================
-   Wrapper Element
-   ============================================================================ */
-
-[data-checkbox] {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--checkbox-label-gap);
-
-  /* Size Variants */
-  &[data-checkbox~="sm"] {
-    --checkbox-size: var(--checkbox-size-sm);
-    --checkbox-label-fs: 0.875rem; /* 14px */
-  }
-
-  &[data-checkbox~="md"] {
-    --checkbox-size: var(--checkbox-size-md);
-    --checkbox-label-fs: 1rem; /* 16px */
-  }
-
-  &[data-checkbox~="lg"] {
-    --checkbox-size: var(--checkbox-size-lg);
-    --checkbox-label-fs: 1.125rem; /* 18px */
-  }
-
-  /* Color Variants */
-  &[data-checkbox~="primary"] {
-    --checkbox-checked-bg: var(--checkbox-primary-checked-bg);
-    --checkbox-checked-border: var(--checkbox-primary-checked-border);
-    --checkbox-hover-border-color: var(--checkbox-primary-hover-border);
-    --checkbox-focus-outline-color: var(--checkbox-primary-focus-outline-color);
-    --checkbox-indeterminate-bg: var(--checkbox-primary-checked-bg);
-    --checkbox-indeterminate-border: var(--checkbox-primary-checked-border);
-  }
-
-  &[data-checkbox~="secondary"] {
-    --checkbox-checked-bg: var(--checkbox-secondary-checked-bg);
-    --checkbox-checked-border: var(--checkbox-secondary-checked-border);
-    --checkbox-hover-border-color: var(--checkbox-secondary-hover-border);
-    --checkbox-focus-outline-color: var(
-      --checkbox-secondary-focus-outline-color
-    );
-    --checkbox-indeterminate-bg: var(--checkbox-secondary-checked-bg);
-    --checkbox-indeterminate-border: var(--checkbox-secondary-checked-border);
-  }
-
-  &[data-checkbox~="error"] {
-    --checkbox-checked-bg: var(--checkbox-error-checked-bg);
-    --checkbox-checked-border: var(--checkbox-error-checked-border);
-    --checkbox-hover-border-color: var(--checkbox-error-hover-border);
-    --checkbox-focus-outline-color: var(--checkbox-error-focus-outline-color);
-    --checkbox-indeterminate-bg: var(--checkbox-error-checked-bg);
-    --checkbox-indeterminate-border: var(--checkbox-error-checked-border);
-  }
-
-  &[data-checkbox~="success"] {
-    --checkbox-checked-bg: var(--checkbox-success-checked-bg);
-    --checkbox-checked-border: var(--checkbox-success-checked-border);
-    --checkbox-hover-border-color: var(--checkbox-success-hover-border);
-    --checkbox-focus-outline-color: var(
-      --checkbox-success-focus-outline-color
-    );
-    --checkbox-indeterminate-bg: var(--checkbox-success-checked-bg);
-    --checkbox-indeterminate-border: var(--checkbox-success-checked-border);
-  }
-}
-
-/* ============================================================================
-   Container (Input + Label)
-   ============================================================================ */
-
-.checkbox-container {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--checkbox-label-gap);
-  cursor: var(--checkbox-cursor);
-}
-
-/* ============================================================================
-   Input Wrapper (Contains native input + custom indicator)
-   ============================================================================ */
-
-.checkbox-input-wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0; /* Prevent checkbox from shrinking */
-}
-
-/* ============================================================================
-   Native Checkbox Input (Hidden but accessible)
-   ============================================================================ */
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  margin: 0;
-  cursor: var(--checkbox-cursor);
-  z-index: 1;
-
-  /* Focus State */
-  &:focus-visible + .checkbox-indicator {
-    outline: var(--checkbox-focus-outline);
-    outline-color: var(--checkbox-focus-outline-color);
-    outline-offset: var(--checkbox-focus-outline-offset);
-  }
-
-  /* Hover State */
-  &:hover:not(:disabled):not([aria-disabled="true"]) + .checkbox-indicator {
-    background-color: var(--checkbox-hover-bg);
-    border-color: var(--checkbox-hover-border-color);
-  }
-
-  /* Checked State */
-  &:checked + .checkbox-indicator {
-    background-color: var(--checkbox-checked-bg);
-    border-color: var(--checkbox-checked-border);
-
-    .checkbox-checkmark {
-      opacity: var(--checkbox-checked-checkmark-opacity);
-      transform: var(--checkbox-checked-checkmark-transform);
-    }
-
-    .checkbox-indeterminate-dash {
-      opacity: 0;
-    }
-  }
-
-  /* Indeterminate State */
-  &:indeterminate + .checkbox-indicator {
-    background-color: var(--checkbox-indeterminate-bg);
-    border-color: var(--checkbox-indeterminate-border);
-
-    .checkbox-checkmark {
-      opacity: 0;
-    }
-
-    .checkbox-indeterminate-dash {
-      opacity: var(--checkbox-indeterminate-dash-opacity);
-    }
-  }
-
-  /* Disabled State */
-  &:disabled,
-  &[aria-disabled="true"] {
-    cursor: var(--checkbox-disabled-cursor);
-
-    & + .checkbox-indicator {
-      background-color: var(--checkbox-disabled-bg);
-      border-color: var(--checkbox-disabled-border-color);
-      opacity: var(--checkbox-disabled-opacity);
-      cursor: var(--checkbox-disabled-cursor);
-    }
-  }
-
-  /* Invalid State */
-  &[aria-invalid="true"]:not(:checked):not(:indeterminate) + .checkbox-indicator {
-    border-color: var(--checkbox-invalid-border-color);
-  }
-
-  &[aria-invalid="true"]:focus-visible + .checkbox-indicator {
-    outline-color: var(--checkbox-invalid-focus-outline-color);
-  }
-}
-
-/* ============================================================================
-   Custom Checkbox Indicator
-   ============================================================================ */
-
-.checkbox-indicator {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  min-width: var(--checkbox-size); /* Prevent shrinking */
-  min-height: var(--checkbox-size);
-  background-color: var(--checkbox-bg);
-  border: var(--checkbox-border);
-  border-radius: var(--checkbox-radius);
-  transition: var(--checkbox-transition);
-  pointer-events: none; /* Let clicks pass through to input */
-}
-
-/* ============================================================================
-   Checkmark SVG (Checked State)
-   ============================================================================ */
-
-.checkbox-checkmark {
-  width: 75%; /* Scale relative to checkbox size */
-  height: 75%;
-  color: var(--checkbox-checkmark-color);
-  opacity: var(--checkbox-checkmark-opacity);
-  transform: var(--checkbox-checkmark-transform);
-  transition: var(--checkbox-transition);
-  pointer-events: none;
-}
-
-/* ============================================================================
-   Indeterminate Dash (Indeterminate State)
-   ============================================================================ */
-
-.checkbox-indeterminate-dash {
-  position: absolute;
-  width: var(--checkbox-indeterminate-dash-width);
-  height: var(--checkbox-indeterminate-dash-height);
-  background-color: var(--checkbox-checkmark-color);
-  border-radius: calc(var(--checkbox-indeterminate-dash-height) / 2);
-  opacity: 0;
-  transition: var(--checkbox-transition);
-  pointer-events: none;
-}
-
-/* ============================================================================
-   Label
-   ============================================================================ */
-
-.checkbox-label {
-  display: inline-flex;
-  align-items: flex-start;
-  font-size: var(--checkbox-label-fs);
-  font-weight: var(--checkbox-label-fw);
-  color: var(--checkbox-label-color);
-  cursor: var(--checkbox-label-cursor);
-  user-select: none;
-  line-height: 1.5;
-
-  /* Match checkbox vertical alignment */
-  padding-block-start: calc((var(--checkbox-size) - var(--checkbox-label-fs) * 1.5) / 2);
-}
-
-/* Required Indicator */
-.checkbox-required {
-  color: var(--checkbox-required-color);
-  font-weight: var(--checkbox-required-fw);
-}
-
-/* ============================================================================
-   Description Text
-   ============================================================================ */
-
-.checkbox-description {
-  font-size: var(--checkbox-description-fs);
-  color: var(--checkbox-description-color);
-  margin-block-start: var(--checkbox-description-margin-block-start);
-  padding-inline-start: var(--checkbox-description-padding-inline-start);
-  line-height: 1.5;
-}
-
-/* ============================================================================
-   Error Message
-   ============================================================================ */
-
-.checkbox-error {
-  font-size: var(--checkbox-error-fs);
-  color: var(--checkbox-error-color);
-  margin-block-start: var(--checkbox-error-margin-block-start);
-  padding-inline-start: var(--checkbox-error-padding-inline-start);
-  line-height: 1.5;
-}
-
-/* ============================================================================
-   Disabled State on Wrapper
-   ============================================================================ */
-
-[data-checkbox].is-disabled {
-  .checkbox-label {
-    cursor: var(--checkbox-disabled-cursor);
-    opacity: var(--checkbox-disabled-opacity);
-  }
-
-  .checkbox-container {
-    cursor: var(--checkbox-disabled-cursor);
-  }
-
-  .checkbox-description,
-  .checkbox-error {
-    opacity: var(--checkbox-disabled-opacity);
-  }
-}