@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/components/buttons/button.stories.tsx

@@ -181,8 +181,8 @@ export const DisabledCustom: Story = {
     classes: "my-custom-button",
     styles: {
       "--btn-fs": "1.25rem",
-      "--btn-py": "0.75rem",
-      "--btn-px": "1.5rem",
+      "--btn-padding-block": "0.75rem",
+      "--btn-padding-inline": "1.5rem",
     },
     children: "Custom Disabled",
   },
@@ -225,3 +225,189 @@ Try clicking - only enabled button responds.
     },
   },
 } as Story;
+
+/**
+ * CSS Variable Customization
+ *
+ * Demonstrates how to customize button appearance using the new standardized
+ * CSS custom property naming convention.
+ *
+ * New variable naming patterns:
+ * - Size tokens: `--btn-size-{xs|sm|md|lg}`
+ * - Logical properties: `--btn-padding-inline`, `--btn-padding-block`
+ * - Full property names: `--btn-radius`, `--btn-color`, `--btn-display`, `--btn-border`
+ * - Approved abbreviations: `--btn-fs` (font-size), `--btn-bg` (background), `--btn-fw` (font-weight)
+ */
+export const Customization: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
+      {/* Custom brand colors */}
+      <div>
+        <h4>Custom Brand Colors</h4>
+        <Button
+          type="button"
+          styles={{
+            "--btn-bg": "#0066cc",
+            "--btn-color": "white",
+            "--btn-radius": "0.5rem",
+            "--btn-padding-inline": "2rem",
+            "--btn-padding-block": "0.75rem",
+          }}
+        >
+          Brand Button
+        </Button>
+      </div>
+
+      {/* Custom sizes using logical properties */}
+      <div>
+        <h4>Custom Padding (Logical Properties)</h4>
+        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+          <Button
+            type="button"
+            styles={{
+              "--btn-padding-inline": "0.5rem",
+              "--btn-padding-block": "0.25rem",
+              "--btn-fs": "0.875rem",
+            }}
+          >
+            Compact
+          </Button>
+          <Button
+            type="button"
+            styles={{
+              "--btn-padding-inline": "3rem",
+              "--btn-padding-block": "1rem",
+              "--btn-fs": "1.125rem",
+            }}
+          >
+            Spacious
+          </Button>
+        </div>
+      </div>
+
+      {/* Custom hover effects */}
+      <div>
+        <h4>Custom Hover Effects</h4>
+        <Button
+          type="button"
+          styles={{
+            "--btn-bg": "#28a745",
+            "--btn-color": "white",
+            "--btn-hover-filter": "brightness(1.1)",
+            "--btn-hover-transform": "translateY(-2px)",
+          }}
+        >
+          Hover Me
+        </Button>
+      </div>
+
+      {/* Custom borders and shapes */}
+      <div>
+        <h4>Custom Borders & Shapes</h4>
+        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+          <Button
+            type="button"
+            styles={{
+              "--btn-bg": "transparent",
+              "--btn-color": "#0066cc",
+              "--btn-border": "2px solid currentColor",
+              "--btn-radius": "0",
+            }}
+          >
+            Square Outline
+          </Button>
+          <Button
+            type="button"
+            styles={{
+              "--btn-bg": "#dc3545",
+              "--btn-color": "white",
+              "--btn-radius": "100rem",
+              "--btn-padding-inline": "2rem",
+            }}
+          >
+            Pill Shape
+          </Button>
+        </div>
+      </div>
+
+      {/* Dark theme example */}
+      <div
+        style={{
+          background: "#1a1a1a",
+          padding: "1.5rem",
+          borderRadius: "0.5rem",
+        }}
+      >
+        <h4 style={{ color: "white", marginTop: 0 }}>Dark Theme Example</h4>
+        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+          <Button
+            type="button"
+            styles={{
+              "--btn-bg": "#3b82f6",
+              "--btn-color": "white",
+              "--btn-hover-filter": "brightness(1.2)",
+            }}
+          >
+            Primary
+          </Button>
+          <Button
+            type="button"
+            styles={{
+              "--btn-bg": "transparent",
+              "--btn-color": "#e5e7eb",
+              "--btn-border": "1px solid #4b5563",
+              "--btn-hover-filter": "brightness(1.3)",
+            }}
+          >
+            Secondary
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: `
+## Available CSS Variables
+
+### Size Tokens
+- \`--btn-size-xs\`: 0.6875rem (11px)
+- \`--btn-size-sm\`: 0.8125rem (13px)
+- \`--btn-size-md\`: 0.9375rem (15px)
+- \`--btn-size-lg\`: 1.125rem (18px)
+
+### Base Properties
+- \`--btn-padding-inline\`: Horizontal padding (logical property)
+- \`--btn-padding-block\`: Vertical padding (logical property)
+- \`--btn-radius\`: Border radius
+- \`--btn-color\`: Text color
+- \`--btn-bg\`: Background color
+- \`--btn-border\`: Border style
+- \`--btn-display\`: Display property
+- \`--btn-whitespace\`: White-space handling
+- \`--btn-spacing\`: Margin/spacing
+
+### Typography (Approved Abbreviations)
+- \`--btn-fs\`: Font size
+- \`--btn-fw\`: Font weight
+
+### State Variables
+- \`--btn-hover-filter\`: Filter on hover
+- \`--btn-hover-transform\`: Transform on hover
+- \`--btn-hover-outline\`: Outline on hover
+
+### Migration from Old Names
+- ❌ \`--btn-px\` → ✅ \`--btn-padding-inline\`
+- ❌ \`--btn-py\` → ✅ \`--btn-padding-block\`
+- ❌ \`--btn-rds\` → ✅ \`--btn-radius\`
+- ❌ \`--btn-cl\` → ✅ \`--btn-color\`
+- ❌ \`--btn-dsp\` → ✅ \`--btn-display\`
+- ❌ \`--btn-bdr\` → ✅ \`--btn-border\`
+- ❌ \`--btn-wspc\` → ✅ \`--btn-whitespace\`
+- ❌ \`--btn-spc\` → ✅ \`--btn-spacing\`
+        `,
+      },
+    },
+  },
+} as Story;

package/src/components/cards/card.scss

@@ -1,11 +1,23 @@
 :root {
-  --card-p: 2rem;
+  // Base card properties
+  --card-padding: 2rem;
   --card-bg: #fff;
-  --card-radius: calc(var(--card-p) / 4);
+  --card-radius: calc(var(--card-padding) / 4);
   --card-position: relative;
   --card-display: flex;
   --card-direction: column;
   --card-gap: 1rem;
+
+  // Element-specific variables (NEW - for complex card layouts)
+  --card-header-padding: 1rem 1.5rem;
+  --card-header-bg: #f8f9fa;
+  --card-header-border-bottom: 1px solid #dee2e6;
+
+  --card-body-padding: 1.5rem;
+
+  --card-footer-padding: 1rem 1.5rem;
+  --card-footer-bg: #f8f9fa;
+  --card-footer-border-top: 1px solid #dee2e6;
 }
 
 [data-card],
@@ -32,14 +44,36 @@
   }
 
   > *:not(img) {
-    padding-inline: var(--card-p);
+    padding-inline: var(--card-padding);
   }
   > *:last-child:not(img) {
     // margin-block-end: 0;
-    padding-block-end: var(--card-p);
+    padding-block-end: var(--card-padding);
   }
   > *:first-child:not(img) {
-    padding-block-start: calc(var(--card-p) - 0.5rem);
+    padding-block-start: calc(var(--card-padding) - 0.5rem);
+  }
+
+  // Element-specific styling (using new scoped variables)
+  > header,
+  > [data-card-header] {
+    padding: var(--card-header-padding);
+    background-color: var(--card-header-bg);
+    border-bottom: var(--card-header-border-bottom);
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+
+  > [data-card-body] {
+    padding: var(--card-body-padding);
+    flex: 1;
+  }
+
+  > footer,
+  > [data-card-footer] {
+    padding: var(--card-footer-padding);
+    background-color: var(--card-footer-bg);
+    border-top: var(--card-footer-border-top);
+    border-radius: 0 0 var(--card-radius) var(--card-radius);
   }
 }
 

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

@@ -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;
       }