@fpkit/acss 3.7.0 → 3.8.0

package/src/sass/_columns.scss

@@ -36,10 +36,10 @@
  * accessed via JavaScript. SCSS uses literal values for media queries.
  */
 :root {
-  --col-breakpoint-xs: 0rem;      /* 0px - base mobile */
-  --col-breakpoint-sm: 30rem;     /* 480px - large phones */
-  --col-breakpoint-md: 48rem;     /* 768px - tablets */
-  --col-breakpoint-lg: 64rem;     /* 1024px - desktops */
+  --col-breakpoint-xs: 0rem; /* 0px - base mobile */
+  --col-breakpoint-sm: 30rem; /* 480px - large phones */
+  --col-breakpoint-md: 48rem; /* 768px - tablets */
+  --col-breakpoint-lg: 64rem; /* 1024px - desktops */
 
   /* Legacy support - keep for backward compatibility */
   --col-breakpoint: var(--col-breakpoint-md);
@@ -51,9 +51,9 @@
  * @media queries require compile-time values, not runtime CSS variables.
  */
 $col-breakpoints: (
-  'sm': 30rem,
-  'md': 48rem,
-  'lg': 64rem,
+  "sm": 30rem,
+  "md": 48rem,
+  "lg": 64rem,
 );
 
 /* ============================================================================
@@ -432,8 +432,12 @@ $col-breakpoints: (
  */
 @each $breakpoint, $min-width in $col-breakpoints {
   @media (width >= #{$min-width}) {
-    .col-#{$breakpoint}-order-first { order: -1; }
-    .col-#{$breakpoint}-order-last { order: 13; }
+    .col-#{$breakpoint}-order-first {
+      order: -1;
+    }
+    .col-#{$breakpoint}-order-last {
+      order: 13;
+    }
 
     @for $i from 0 through 12 {
       .col-#{$breakpoint}-order-#{$i} {

package/src/styles/checkbox/checkbox.css

@@ -0,0 +1,372 @@
+/* ============================================================================
+   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 */
+  /* Color Variants */
+}
+[data-checkbox][data-checkbox~=sm] {
+  --checkbox-size: var(--checkbox-size-sm);
+  --checkbox-label-fs: 0.875rem; /* 14px */
+}
+[data-checkbox][data-checkbox~=md] {
+  --checkbox-size: var(--checkbox-size-md);
+  --checkbox-label-fs: 1rem; /* 16px */
+}
+[data-checkbox][data-checkbox~=lg] {
+  --checkbox-size: var(--checkbox-size-lg);
+  --checkbox-label-fs: 1.125rem; /* 18px */
+}
+[data-checkbox][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][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][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][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 */
+  /* Hover State */
+  /* Checked State */
+  /* Indeterminate State */
+  /* Disabled State */
+  /* Invalid State */
+}
+.checkbox-input:focus-visible + .checkbox-indicator {
+  outline: var(--checkbox-focus-outline);
+  outline-color: var(--checkbox-focus-outline-color);
+  outline-offset: var(--checkbox-focus-outline-offset);
+}
+.checkbox-input:hover:not(:disabled):not([aria-disabled=true]) + .checkbox-indicator {
+  background-color: var(--checkbox-hover-bg);
+  border-color: var(--checkbox-hover-border-color);
+}
+.checkbox-input:checked + .checkbox-indicator {
+  background-color: var(--checkbox-checked-bg);
+  border-color: var(--checkbox-checked-border);
+}
+.checkbox-input:checked + .checkbox-indicator .checkbox-checkmark {
+  opacity: var(--checkbox-checked-checkmark-opacity);
+  transform: var(--checkbox-checked-checkmark-transform);
+}
+.checkbox-input:checked + .checkbox-indicator .checkbox-indeterminate-dash {
+  opacity: 0;
+}
+.checkbox-input:indeterminate + .checkbox-indicator {
+  background-color: var(--checkbox-indeterminate-bg);
+  border-color: var(--checkbox-indeterminate-border);
+}
+.checkbox-input:indeterminate + .checkbox-indicator .checkbox-checkmark {
+  opacity: 0;
+}
+.checkbox-input:indeterminate + .checkbox-indicator .checkbox-indeterminate-dash {
+  opacity: var(--checkbox-indeterminate-dash-opacity);
+}
+.checkbox-input:disabled, .checkbox-input[aria-disabled=true] {
+  cursor: var(--checkbox-disabled-cursor);
+}
+.checkbox-input:disabled + .checkbox-indicator, .checkbox-input[aria-disabled=true] + .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);
+}
+.checkbox-input[aria-invalid=true]:not(:checked):not(:indeterminate) + .checkbox-indicator {
+  border-color: var(--checkbox-invalid-border-color);
+}
+.checkbox-input[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);
+}
+[data-checkbox].is-disabled .checkbox-container {
+  cursor: var(--checkbox-disabled-cursor);
+}
+[data-checkbox].is-disabled .checkbox-description,
+[data-checkbox].is-disabled .checkbox-error {
+  opacity: var(--checkbox-disabled-opacity);
+}
+
+/*# sourceMappingURL=checkbox.css.map */

package/src/styles/checkbox/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/checkbox/checkbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAeA;AACE;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAAA;AAAA;AAIA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAAA;AAAA;AAIA;AAAA;AAAA;EAIA;EACA;AAEA;AAAA;AAAA;AAIA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAIA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;AAEA;AAgBA;;AAfA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAIJ;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAOA;AAMA;AAeA;AAcA;AAaA;;AAtDA;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAKJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAKE;EACE;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE","file":"checkbox.css"}