@fpkit/acss 0.6.2 → 1.0.0

package/src/components/cards/card.scss.backup

@@ -0,0 +1,67 @@
+:root {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 4);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+}
+
+[data-card],
+[data-component~='card'] {
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  border-radius: var(--card-radius);
+  background-color: var(--card-bg);
+  text-align: var(--card-align, left);
+  
+  h3,
+  h2 {
+    margin-block-end: 0;
+    padding-block-end: 0;
+  }
+  + div {
+    margin-block-start: 0;
+  }
+  > article {
+    display: flex;
+    flex-direction: column;
+    flex: 2;
+  }
+
+  > *:not(img) {
+    padding-inline: var(--card-p);
+  }
+  > *:last-child:not(img) {
+    // margin-block-end: 0;
+    padding-block-end: var(--card-p);
+  }
+  > *:first-child:not(img) {
+    padding-block-start: calc(var(--card-p) - 0.5rem);
+  }
+}
+
+// Interactive card styles - WCAG 2.4.7 compliant focus indicators
+[data-card="interactive"] {
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+  }
+
+  // Visible focus indicator with 3:1 minimum contrast (WCAG 2.4.7)
+  &:focus-visible {
+    outline: 0.125rem solid var(--focus-color, #0066CC);
+    outline-offset: 0.125rem;
+  }
+
+  // Hide outline for mouse users (modern browsers)
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+

package/src/components/cards/card.stories.tsx

@@ -6,7 +6,7 @@ const content =
 
 const meta: Meta<typeof Card> = {
   title: "FP.REACT Components/Card",
-  tags: ["rc", "autodocs"],
+  tags: ["stable", "autodocs"],
   component: Card,
   args: {
     children: <p>{content}</p>,
@@ -307,3 +307,186 @@ export const CustomHeadingLevels: Story = {
     },
   },
 } as Story;
+
+/**
+ * CSS Variable Customization
+ *
+ * Demonstrates how to customize card appearance using the new standardized
+ * CSS custom property naming convention.
+ *
+ * New variable naming patterns:
+ * - Base properties: `--card-padding`, `--card-radius`, `--card-bg`, `--card-gap`
+ * - Element-specific: `--card-header-*`, `--card-body-*`, `--card-footer-*`
+ * - Full property names (no single-letter abbreviations)
+ */
+export const Customization: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Custom padding and spacing */}
+      <div>
+        <h4>Custom Padding & Spacing</h4>
+        <Card styles={{
+          "--card-padding": "3rem",
+          "--card-radius": "1rem",
+          "--card-gap": "1.5rem",
+        }}>
+          <Card.Title>Spacious Card</Card.Title>
+          <Card.Content>
+            <p>This card uses custom padding (3rem) and larger border radius (1rem).</p>
+          </Card.Content>
+        </Card>
+      </div>
+
+      {/* Compact card */}
+      <div>
+        <h4>Compact Card</h4>
+        <Card styles={{
+          "--card-padding": "1rem",
+          "--card-radius": "0.25rem",
+          "--card-gap": "0.5rem",
+        }}>
+          <Card.Title>Compact Card</Card.Title>
+          <Card.Content>
+            <p>This card uses minimal padding and smaller gaps for a compact layout.</p>
+          </Card.Content>
+        </Card>
+      </div>
+
+      {/* Custom header/footer styling */}
+      <div>
+        <h4>Element-Specific Customization (Header, Body, Footer)</h4>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Card styles={{
+            "--card-header-padding": "1.5rem 2rem",
+            "--card-header-bg": "#0066cc",
+            "--card-header-border-bottom": "none",
+            "--card-body-padding": "2rem",
+            "--card-footer-padding": "1rem 2rem",
+            "--card-footer-bg": "#f0f0f0",
+            "--card-footer-border-top": "2px solid #ddd",
+          }}>
+            <header data-card-header style={{ color: 'white' }}>
+              <h3 style={{ margin: 0 }}>Custom Header</h3>
+            </header>
+            <div data-card-body>
+              <p>This card demonstrates element-specific customization using the new scoped variables.</p>
+              <p>Header has custom blue background, body has custom padding, footer has custom gray background.</p>
+            </div>
+            <footer data-card-footer>
+              <small>Custom Footer Content</small>
+            </footer>
+          </Card>
+
+          <Card styles={{
+            "--card-header-padding": "0.75rem 1.25rem",
+            "--card-header-bg": "#28a745",
+            "--card-header-border-bottom": "3px solid #1e7e34",
+            "--card-body-padding": "1.25rem",
+            "--card-footer-padding": "0.75rem 1.25rem",
+            "--card-footer-bg": "#e7f5ea",
+          }}>
+            <header data-card-header style={{ color: 'white' }}>
+              <h3 style={{ margin: 0 }}>Green Theme</h3>
+            </header>
+            <div data-card-body>
+              <p>Another example with green theme and custom element spacing.</p>
+            </div>
+            <footer data-card-footer>
+              <small>Footer with light green background</small>
+            </footer>
+          </Card>
+        </div>
+      </div>
+
+      {/* Dark theme card */}
+      <div
+        style={{
+          background: "#1a1a1a",
+          padding: "1.5rem",
+          borderRadius: "0.5rem",
+        }}
+      >
+        <h4 style={{ color: "white", marginTop: 0 }}>Dark Theme Example</h4>
+        <Card styles={{
+          "--card-bg": "#2a2a2a",
+          "--card-padding": "2rem",
+          "--card-radius": "0.75rem",
+          "--card-header-bg": "#3a3a3a",
+          "--card-header-border-bottom": "1px solid #4a4a4a",
+          "--card-footer-bg": "#3a3a3a",
+          "--card-footer-border-top": "1px solid #4a4a4a",
+        }}>
+          <header data-card-header>
+            <h3 style={{ margin: 0, color: 'white' }}>Dark Mode Card</h3>
+          </header>
+          <div data-card-body style={{ color: '#e5e7eb' }}>
+            <p>This card demonstrates dark theme customization with all element-specific variables.</p>
+          </div>
+          <footer data-card-footer style={{ color: '#9ca3af' }}>
+            <small>Styled with CSS custom properties</small>
+          </footer>
+        </Card>
+      </div>
+
+      {/* Brand card */}
+      <div>
+        <h4>Brand Card (No Radius, Custom Colors)</h4>
+        <Card styles={{
+          "--card-bg": "#fff5e6",
+          "--card-radius": "0",
+          "--card-padding": "2.5rem",
+          "--card-gap": "2rem",
+          "--card-header-bg": "#ff9800",
+          "--card-header-border-bottom": "4px solid #f57c00",
+        }}>
+          <header data-card-header>
+            <h3 style={{ margin: 0, color: 'white' }}>Brand Card</h3>
+          </header>
+          <div data-card-body>
+            <p>This card uses brand colors and no border radius for a distinct look.</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: `
+## Available CSS Variables
+
+### Base Properties
+- \`--card-padding\`: Main card padding (default: 2rem)
+- \`--card-bg\`: Background color (default: #fff)
+- \`--card-radius\`: Border radius (default: calc(var(--card-padding) / 4))
+- \`--card-display\`: Display property (default: flex)
+- \`--card-direction\`: Flex direction (default: column)
+- \`--card-gap\`: Gap between child elements (default: 1rem)
+
+### Element-Specific Variables (NEW)
+#### Header
+- \`--card-header-padding\`: Header padding (default: 1rem 1.5rem)
+- \`--card-header-bg\`: Header background color (default: #f8f9fa)
+- \`--card-header-border-bottom\`: Header bottom border (default: 1px solid #dee2e6)
+
+#### Body
+- \`--card-body-padding\`: Body content padding (default: 1.5rem)
+
+#### Footer
+- \`--card-footer-padding\`: Footer padding (default: 1rem 1.5rem)
+- \`--card-footer-bg\`: Footer background color (default: #f8f9fa)
+- \`--card-footer-border-top\`: Footer top border (default: 1px solid #dee2e6)
+
+### Migration from Old Names
+- ❌ \`--card-p\` → ✅ \`--card-padding\`
+
+### Usage with Element Selectors
+Element-specific variables work with:
+- \`<header>\` or \`[data-card-header]\`
+- \`[data-card-body]\`
+- \`<footer>\` or \`[data-card-footer]\`
+        `,
+      },
+    },
+  },
+} as Story;

package/src/components/details/details.scss

@@ -3,14 +3,14 @@ details {
   --details-direction: column;
   --details-display: flex;
   --details-gap: 0rem;
-  --details-h: max-content;
+  --details-height: max-content;
   --details-justify: flex-start;
-  --details-px: 1.5rem;
-  --details-py: 1rem;
+  --details-padding-inline: 1.5rem;
+  --details-padding-block: 1rem;
   --details-radius: 0;
-  --details-w: 100%;
-  --max-h-closed: 6.25rem;
-  --max-h-open: 50rem;
+  --details-width: 100%;
+  --details-max-height-closed: 6.25rem;
+  --details-max-height-open: 50rem;
   --summary-align: center;
   --summary-cursor: pointer;
   --summary-display: flex;
@@ -23,12 +23,12 @@ details {
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
   gap: var(--details-gap);
-  width: var(--details-w);
+  width: var(--details-width);
   border: var(--details-border);
   border-left: none;
   border-right: none;
   transition: var(--summary-transitions);
-  max-height: var(--max-h-closed);
+  max-height: var(--details-max-height-closed);
   overflow: clip;
 
   @starting-style {
@@ -62,8 +62,8 @@ details {
     display: var(--summary-display);
     justify-content: var(--summary-justify);
     align-items: var(--summary-align);
-    padding-inline: var(--summary-px, var(--details-px));
-    padding-block: var(--summary-py, var(--details-py));
+    padding-inline: var(--summary-padding-inline, var(--details-padding-inline));
+    padding-block: var(--summary-padding-block, var(--details-padding-block));
     gap: var(--summary-gap);
     list-style: none;
     border-top-left-radius: var(--details-radius);
@@ -85,7 +85,7 @@ details {
       cursor: var(--summary-cursor);
     }
     > section {
-      width: var(--details-w);
+      width: var(--details-width);
     }
   }
 
@@ -97,8 +97,8 @@ details {
   }
 
   > section {
-    padding-inline: var(--details-px);
-    padding-block: var(--details-py);
+    padding-inline: var(--details-padding-inline);
+    padding-block: var(--details-padding-block);
     margin-block-start: 0;
     border: 1px transparent solid;
   }
@@ -110,7 +110,7 @@ details {
       border-bottom: var(--details-border);
     }
     > section {
-      max-height: var(--max-h-open);
+      max-height: var(--details-max-height-open);
       @starting-style {
         max-height: 0;
       }

package/src/components/details/details.scss.backup

@@ -0,0 +1,126 @@
+details {
+  --details-border: 0.0625rem solid #dfdfdf;
+  --details-direction: column;
+  --details-display: flex;
+  --details-gap: 0rem;
+  --details-h: max-content;
+  --details-justify: flex-start;
+  --details-px: 1.5rem;
+  --details-py: 1rem;
+  --details-radius: 0;
+  --details-w: 100%;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+  --summary-align: center;
+  --summary-cursor: pointer;
+  --summary-display: flex;
+  --summary-gap: 0.5rem;
+  --summary-justify: flex-start;
+  --summary-transitions: all 0.75s ease-in-out;
+
+  interpolate-size: allow-keywords;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  border-left: none;
+  border-right: none;
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+
+  @starting-style {
+    transition: var(--summary-transitions);
+    color: red;
+  }
+
+  & + details {
+    border-radius: 0; // remove radius from middle elements
+    border-top: none; // optional: remove double borders
+  }
+
+  &:first-of-type {
+    border-radius: var(--details-radius) var(--details-radius) 0 0;
+  }
+
+  &:last-of-type {
+    border-radius: 0 0 var(--details-radius) var(--details-radius);
+  }
+
+  // If it's the only details element, keep original radius
+  &:only-of-type {
+    border-radius: var(--details-radius);
+  }
+
+  &::marker {
+    content: none;
+  }
+
+  summary {
+    display: var(--summary-display);
+    justify-content: var(--summary-justify);
+    align-items: var(--summary-align);
+    padding-inline: var(--summary-px, var(--details-px));
+    padding-block: var(--summary-py, var(--details-py));
+    gap: var(--summary-gap);
+    list-style: none;
+    border-top-left-radius: var(--details-radius);
+    border-top-right-radius: var(--details-radius);
+    transition: var(--summary-transitions);
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-within {
+      outline: none;
+      border-bottom: solid 2px currentColor;
+      background-color: whitesmoke;
+    }
+
+    /* This ensures no bullet points are shown */
+    &:hover {
+      cursor: var(--summary-cursor);
+    }
+    > section {
+      width: var(--details-w);
+    }
+  }
+
+  .list-styles {
+    summary {
+      border-left: none;
+      border-right: none;
+    }
+  }
+
+  > section {
+    padding-inline: var(--details-px);
+    padding-block: var(--details-py);
+    margin-block-start: 0;
+    border: 1px transparent solid;
+  }
+
+  &[open] {
+    max-height: max-content;
+    transition: var(--summary-transitions);
+    > summary {
+      border-bottom: var(--details-border);
+    }
+    > section {
+      max-height: var(--max-h-open);
+      @starting-style {
+        max-height: 0;
+      }
+    }
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    @starting-style {
+      max-height: 0;
+      transition: var(--summary-transitions);
+    }
+  }
+}

package/src/components/details/details.stories.tsx

@@ -31,7 +31,47 @@ const icon = <Icons.Add />;
 const meta: Meta<typeof Details> = {
   title: "FP.REACT Components/Details",
   component: Details,
-  tags: ["rc"],
+  tags: ["stable"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Expandable/collapsible details component with smooth transitions and accessible markup.
+
+## CSS Variables
+
+### Layout & Display
+- \`--details-display\`: Display mode (default: flex)
+- \`--details-direction\`: Flex direction (default: column)
+- \`--details-justify\`: Content justification (default: flex-start)
+- \`--details-width\`: Details width (default: 100%)
+- \`--details-height\`: Details height (default: max-content)
+- \`--details-gap\`: Gap between elements (default: 0rem)
+
+### Sizing & Constraints
+- \`--details-max-height-closed\`: Max height when closed (default: 6.25rem)
+- \`--details-max-height-open\`: Max height when open (default: 50rem)
+
+### Spacing
+- \`--details-padding-inline\`: Horizontal padding (default: 1.5rem)
+- \`--details-padding-block\`: Vertical padding (default: 1rem)
+
+### Borders & Radius
+- \`--details-border\`: Border style (default: 0.0625rem solid #dfdfdf)
+- \`--details-radius\`: Border radius (default: 0)
+
+### Summary Element
+- \`--summary-display\`: Summary display mode (default: flex)
+- \`--summary-justify\`: Summary content justification (default: flex-start)
+- \`--summary-align\`: Summary vertical alignment (default: center)
+- \`--summary-gap\`: Gap within summary (default: 0.5rem)
+- \`--summary-padding-inline\`: Summary horizontal padding (fallback: \`--details-padding-inline\`)
+- \`--summary-padding-block\`: Summary vertical padding (fallback: \`--details-padding-block\`)
+- \`--summary-cursor\`: Summary cursor style (default: pointer)
+- \`--summary-transitions\`: Transition timing (default: all 0.75s ease-in-out)
+`,
+      },
+    },
+  },
   args: {
     children: content,
     icon: icon,

package/src/components/dialog/dialog.scss

@@ -1,5 +1,5 @@
 :root {
-  --dialog-min-w: max(20rem, 80%);
+  --dialog-min-width: max(20rem, 80%);
   --dialog-gap: 0.625rem;
   --dialog-border-color: lightgray;
   --dialog-border-width: thin;
@@ -33,8 +33,8 @@
 }
 
 dialog {
-  width: var(--dialog-min-w);
-  min-width: var(--min-w);
+  width: var(--dialog-min-width);
+  min-width: var(--dialog-min-width);
   gap: var(--dialog-gap);
   border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);

package/src/components/dialog/dialog.scss.backup

@@ -0,0 +1,126 @@
+:root {
+  --dialog-min-w: max(20rem, 80%);
+  --dialog-gap: 0.625rem;
+  --dialog-border-color: lightgray;
+  --dialog-border-width: thin;
+  --dialog-border-style: solid;
+  --dialog-border-radius: var(--border-radius);
+  --dialog-padding: 1.5rem;
+  --dialog-padding-inline: 1rem;
+  --dialog-close-color: gray;
+  --dialog-button-bg: transparent;
+  --dialog-button-border: transparent thin solid;
+  --dialog-button-hover-bg: whitesmoke;
+  --dialog-display: flex;
+  --dialog-flex-direction: column;
+
+  /* Focus and accessibility */
+  --dialog-focus-color: #0066cc;
+  --dialog-focus-width: 0.125rem;
+  --dialog-focus-offset: 0.125rem;
+  --dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --dialog-border-color: currentColor;
+    --dialog-border-width: 0.125rem;
+    --dialog-close-color: currentColor;
+    --dialog-button-border: currentColor 0.125rem solid;
+    --dialog-focus-width: 0.1875rem;
+  }
+}
+
+dialog {
+  width: var(--dialog-min-w);
+  min-width: var(--min-w);
+  gap: var(--dialog-gap);
+  border: var(--dialog-border-color) var(--dialog-border-width) solid;
+  border-radius: var(--dialog-border-radius);
+  padding: var(--dialog-padding);
+  padding-block-start: var(--dialog-padding);
+
+  /* Focus visible for keyboard navigation */
+  &:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
+
+  &[open] {
+    display: var(--dialog-display);
+    flex-direction: var(--dialog-flex-direction);
+    gap: var(--dialog-gap);
+  }
+
+  section {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    gap: var(--dialog-gap);
+    flex-direction: var(--dialog-flex-direction);
+    margin-block-start: 0;
+    --sect-y: 0;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 100%;
+
+  h3 {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  .dialog-close {
+    margin-block-end: 0;
+  }
+
+  button[type="button"] {
+    background-color: var(--dialog-button-bg);
+    border: var(--dialog-button-border);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--dialog-close-color);
+      background-color: var(--dialog-button-hover-bg);
+    }
+
+    /* Keyboard focus indicator */
+    &:focus-visible {
+      outline: var(--dialog-focus-outline);
+      outline-offset: var(--dialog-focus-offset);
+      border-color: var(--dialog-focus-color);
+      background-color: var(--dialog-button-hover-bg);
+    }
+
+    /* Remove default focus for mouse users */
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+  }
+}
+
+.alert-dialog-actions,
+.dialog-footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: var(--dialog-footer-justify, flex-end);
+  gap: var(--dialog-gap);
+  width: 100%;
+
+  /* Focus styles for footer buttons */
+  button:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: none;
+  }
+}