@fpkit/acss 0.5.12 → 0.6.0

package/src/components/list/list.scss

@@ -0,0 +1,285 @@
+/**
+ * List Component Styles
+ *
+ * Provides default styling for ul, ol, and dl list elements with CSS custom
+ * properties for theming. Uses rem units exclusively for accessibility.
+ *
+ * @base-rem: 16px = 1rem
+ */
+
+// =============================================================================
+// CSS Custom Properties (Theming)
+// =============================================================================
+
+ul,
+ol,
+dl {
+  // Spacing
+  --list-margin-top: 0;
+  --list-margin-bottom: 1rem; // 16px
+  --list-margin-inline: 0;
+  --list-padding-inline: 2.5rem; // 40px - default browser indent
+  --list-gap: 0.5rem; // 8px - gap between items
+
+  // List marker/bullet styling
+  --list-marker-color: currentColor;
+  --list-marker-size: 1em; // Relative to font size
+  --list-marker-offset: 0.5rem; // 8px - space between marker and text
+
+  // Typography
+  --list-font-size: 1rem; // 16px
+  --list-line-height: 1.5; // 24px with 16px font
+  --list-font-family: inherit;
+  --list-color: inherit;
+
+  // List item spacing
+  --list-item-margin-bottom: 0.5rem; // 8px
+  --list-item-padding-inline: 0;
+  --list-item-padding-block: 0;
+
+  // Definition list specific
+  --dt-font-weight: 600; // Semi-bold for terms
+  --dt-margin-bottom: 0.25rem; // 4px
+  --dd-margin-inline-start: 2rem; // 32px - indent for definitions
+  --dd-margin-bottom: 1rem; // 16px
+}
+
+// =============================================================================
+// Base List Styles
+// =============================================================================
+
+ul,
+ol,
+dl {
+  margin-block-start: var(--list-margin-top);
+  margin-block-end: var(--list-margin-bottom);
+  margin-inline: var(--list-margin-inline);
+  padding-inline-start: var(--list-padding-inline);
+  font-size: var(--list-font-size);
+  line-height: var(--list-line-height);
+  font-family: var(--list-font-family);
+  color: var(--list-color);
+
+  // Nested lists
+  ul,
+  ol,
+  dl {
+    margin-block-start: var(--list-gap);
+    margin-block-end: var(--list-gap);
+  }
+}
+
+// =============================================================================
+// Unordered Lists (ul)
+// =============================================================================
+
+ul {
+  list-style-type: disc;
+
+  // Marker color support (modern browsers)
+  &::marker {
+    color: var(--list-marker-color);
+    font-size: var(--list-marker-size);
+  }
+
+  // Nested list markers
+  ul {
+    list-style-type: circle;
+
+    ul {
+      list-style-type: square;
+    }
+  }
+}
+
+// =============================================================================
+// Ordered Lists (ol)
+// =============================================================================
+
+ol {
+  list-style-type: decimal;
+
+  // Marker color support (modern browsers)
+  &::marker {
+    color: var(--list-marker-color);
+    font-size: var(--list-marker-size);
+  }
+
+  // Nested ordered list markers
+  ol {
+    list-style-type: lower-alpha;
+
+    ol {
+      list-style-type: lower-roman;
+    }
+  }
+}
+
+// =============================================================================
+// List Items (li)
+// =============================================================================
+
+li {
+  margin-block-end: var(--list-item-margin-bottom);
+  padding-inline: var(--list-item-padding-inline);
+  padding-block: var(--list-item-padding-block);
+
+  // Last item shouldn't have bottom margin
+  &:last-child {
+    margin-block-end: 0;
+  }
+
+  // Support for custom marker offset
+  padding-inline-start: var(--list-marker-offset);
+}
+
+// =============================================================================
+// Definition Lists (dl)
+// =============================================================================
+
+dl {
+  padding-inline-start: 0;
+}
+
+// Definition Term (dt)
+dt {
+  font-weight: var(--dt-font-weight);
+  margin-block-end: var(--dt-margin-bottom);
+  padding-inline: var(--list-item-padding-inline);
+  padding-block: var(--list-item-padding-block);
+}
+
+// Definition Description (dd)
+dd {
+  margin-inline-start: var(--dd-margin-inline-start);
+  margin-block-end: var(--dd-margin-bottom);
+  padding-inline: var(--list-item-padding-inline);
+  padding-block: var(--list-item-padding-block);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+// =============================================================================
+// List Variants (data-variant attribute)
+// =============================================================================
+
+ul,
+ol,
+dl {
+  // None variant - removes list styling
+  &[data-variant="none"] {
+    list-style-type: none;
+    padding-inline-start: 0;
+
+    li {
+      padding-inline-start: 0;
+    }
+  }
+
+  // Inline variant - horizontal list for navigation
+  &[data-variant="inline"] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--list-gap);
+    padding-inline-start: 0;
+    list-style-type: none;
+
+    li {
+      padding-inline-start: 0;
+      margin-block-end: 0;
+    }
+  }
+
+  // Custom marker variant - allows for custom list markers
+  &[data-variant="custom"] {
+    list-style-type: none;
+    padding-inline-start: 0;
+
+    li {
+      position: relative;
+      padding-inline-start: calc(
+        var(--list-marker-size) + var(--list-marker-offset)
+      );
+
+      // Allow custom marker via ::before pseudo-element
+      &::before {
+        content: var(--list-marker-content, "•");
+        color: var(--list-marker-color);
+        font-size: var(--list-marker-size);
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+
+  // Compact variant - reduced spacing
+  &[data-variant="compact"] {
+    --list-gap: 0.25rem; // 4px
+    --list-item-margin-bottom: 0.25rem; // 4px
+    --list-margin-bottom: 0.5rem; // 8px
+  }
+
+  // Spaced variant - increased spacing
+  &[data-variant="spaced"] {
+    --list-gap: 1rem; // 16px
+    --list-item-margin-bottom: 1rem; // 16px
+  }
+}
+
+// =============================================================================
+// Accessibility Enhancements
+// =============================================================================
+
+// Focus indicators for interactive list items
+li:has(a:focus-visible),
+li:has(button:focus-visible) {
+  // Parent list item gets subtle highlight when child is focused
+  outline: 0.0625rem solid transparent; // 1px
+}
+
+// Ensure list items with focusable children are keyboard accessible
+li:has(> a),
+li:has(> button) {
+  // Reset margins for better click targets
+  margin-block-end: 0;
+}
+
+// =============================================================================
+// Print Styles
+// =============================================================================
+
+@media print {
+  ul,
+  ol,
+  dl {
+    // Reduce margins for print
+    --list-margin-bottom: 0.5rem;
+    --list-item-margin-bottom: 0.25rem;
+  }
+
+  // Ensure markers print correctly
+  ul,
+  ol {
+    list-style-position: inside;
+  }
+}
+
+// =============================================================================
+// Reduced Motion
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  // Disable any potential animations on list markers
+  ul,
+  ol,
+  dl,
+  li,
+  dt,
+  dd {
+    animation: none;
+    transition: none;
+  }
+}