@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/components/alert/alert.scss.backup

@@ -0,0 +1,184 @@
+/* Screen reader only utility class */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+[role="alert"] {
+  /* Success colors */
+  --alert-success-bg: #e6f4ea;
+  --alert-success-border: #34a853;
+  --alert-success-text: #1e4620;
+
+  /* Error colors */
+  --alert-error-bg: #fdeded;
+  --alert-error-border: #d32f2f;
+  --alert-error-text: #5f2120;
+
+  /* Warning colors */
+  --alert-warning-bg: #fff4e5;
+  --alert-warning-border: #ff9800;
+  --alert-warning-text: #663c00;
+
+  /* Info colors */
+  --alert-info-bg: #e5f6fd;
+  --alert-info-border: #0288d1;
+  --alert-info-text: #084154;
+
+  /* Animation */
+  --alert-transition-duration: 0.3s;
+
+  --alert-border: thin solid currentColor;
+
+  background-color: var(--alert-bg, whitesmoke);
+  border: var(--alert-border, currentColor);
+  color: var(--alert-color, currentColor);
+  padding: var(--alert-padding, var(--spc-4));
+  margin-block-end: var(--alert-margin-block-end);
+  font-size: var(--fs-0);
+  line-height: 1.6;
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--alert-border-radius, var(--border-radius));
+  gap: var(--alert-gap, var(--spc-4));
+
+  /* Exit animations */
+  transition:
+    opacity var(--alert-transition-duration) ease,
+    transform var(--alert-transition-duration) ease;
+  opacity: 1;
+  transform: translateY(0);
+
+  &:not([data-visible="true"]) {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
+
+  /* Focus indicators for keyboard navigation (WCAG 2.4.7) */
+  &:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* Hide focus outline for mouse clicks, keep for keyboard */
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .alert-icon {
+    margin-block-start: 0;
+    align-items: center;
+  }
+
+  .alert-message {
+    flex: 2;
+    margin-block-start: 0;
+
+    /* Title styles for both heading and strong elements */
+    .alert-title {
+      margin-block-end: var(--spc-1, 0.25rem);
+      margin-block-start: 0;
+      font-weight: var(--alert-title-weight, 600);
+      font-size: var(--alert-title-size, inherit);
+      line-height: 1.4;
+    }
+
+    /* Reset heading-specific styles */
+    h2.alert-title,
+    h3.alert-title,
+    h4.alert-title,
+    h5.alert-title,
+    h6.alert-title {
+      margin: 0;
+      margin-block-end: var(--spc-1, 0.25rem);
+      font-size: inherit;
+      font-weight: var(--alert-title-weight, 600);
+    }
+  }
+
+  &[data-alert~="info"] {
+    --alert-bg: var(--alert-info-bg);
+    --alert-color: var(--alert-info-text);
+    border-color: var(--alert-info-border);
+  }
+
+  &[data-alert~="warning"] {
+    --alert-bg: var(--alert-warning-bg);
+    --alert-color: var(--alert-warning-text);
+    border-color: var(--alert-warning-border);
+  }
+
+  &[data-alert~="error"] {
+    --alert-bg: var(--alert-error-bg);
+    --alert-color: var(--alert-error-text);
+    border-color: var(--alert-error-border);
+  }
+
+  &[data-alert~="success"] {
+    --alert-bg: var(--alert-success-bg);
+    --alert-color: var(--alert-success-text);
+    border-color: var(--alert-success-border);
+  }
+
+  button {
+    &[data-btn~="icon"] {
+      --btn-bg: transparent;
+      align-items: flex-start;
+    }
+  }
+
+  /* Variant: Filled - Solid colored background */
+  &[data-variant="filled"] {
+    border: none;
+
+    &[data-alert~="info"] {
+      --alert-bg: var(--alert-info-border);
+      --alert-color: white;
+    }
+
+    &[data-alert~="warning"] {
+      --alert-bg: var(--alert-warning-border);
+      --alert-color: white;
+    }
+
+    &[data-alert~="error"] {
+      --alert-bg: var(--alert-error-border);
+      --alert-color: white;
+    }
+
+    &[data-alert~="success"] {
+      --alert-bg: var(--alert-success-border);
+      --alert-color: white;
+    }
+
+    &[data-alert~="default"] {
+      --alert-bg: #757575;
+      --alert-color: white;
+    }
+  }
+
+  /* Variant: Soft - No border, subtle background */
+  &[data-variant="soft"] {
+    border: none;
+  }
+
+  /* Variant: Outlined - Default with border (no additional styles needed) */
+  &[data-variant="outlined"] {
+    /* This is the default variant, styles already applied above */
+  }
+
+  p {
+    font-size: 0.875rem;
+  }
+}

package/src/components/alert/alert.stories.tsx

@@ -41,8 +41,59 @@ const meta: Meta<typeof Alert> = {
   parameters: {
     docs: {
       description: {
-        component:
-          "The Alert component is used to display important messages to users. It can be dismissible and supports various interaction tests",
+        component: `The Alert component is used to display important messages to users with support for multiple severity levels, variants, and accessibility features.
+
+## CSS Variables
+
+Customize the Alert appearance using CSS custom properties:
+
+### Layout & Structure
+- \`--alert-bg\`: Background color (default: \`whitesmoke\`)
+- \`--alert-color\`: Text color (default: \`currentColor\`)
+- \`--alert-border\`: Border style (default: \`thin solid currentColor\`)
+- \`--alert-radius\`: Border radius (default: \`var(--border-radius)\`)
+- \`--alert-padding\`: Internal padding (default: \`var(--spc-4)\`)
+- \`--alert-margin-block-end\`: Bottom margin (default: none)
+- \`--alert-gap\`: Gap between icon and content (default: \`var(--spc-4)\`)
+
+### Severity Colors (Success)
+- \`--alert-success-bg\`: Success background (default: \`#e6f4ea\`)
+- \`--alert-success-border\`: Success border (default: \`#34a853\`)
+- \`--alert-success-text\`: Success text (default: \`#1e4620\`)
+
+### Severity Colors (Error)
+- \`--alert-error-bg\`: Error background (default: \`#fdeded\`)
+- \`--alert-error-border\`: Error border (default: \`#d32f2f\`)
+- \`--alert-error-text\`: Error text (default: \`#5f2120\`)
+
+### Severity Colors (Warning)
+- \`--alert-warning-bg\`: Warning background (default: \`#fff4e5\`)
+- \`--alert-warning-border\`: Warning border (default: \`#ff9800\`)
+- \`--alert-warning-text\`: Warning text (default: \`#663c00\`)
+
+### Severity Colors (Info)
+- \`--alert-info-bg\`: Info background (default: \`#e5f6fd\`)
+- \`--alert-info-border\`: Info border (default: \`#0288d1\`)
+- \`--alert-info-text\`: Info text (default: \`#084154\`)
+
+### Typography
+- \`--alert-title-fw\`: Title font weight (default: \`600\`)
+- \`--alert-title-fs\`: Title font size (default: \`inherit\`)
+
+### Animation
+- \`--alert-transition-duration\`: Animation timing (default: \`0.3s\`)
+
+**Example:**
+\`\`\`css
+[role="alert"] {
+  --alert-radius: 0.5rem;
+  --alert-padding: 1.5rem;
+  --alert-gap: 1rem;
+  --alert-title-fw: 700;
+  --alert-success-bg: #d4edda;
+  --alert-success-border: #28a745;
+}
+\`\`\``,
       },
     },
   },

package/src/components/badge/badge.scss

@@ -3,13 +3,13 @@ sup:has(> span) {
   --badge-color: currentColor;
   --badge-radius: 0.5rem;
   --badge-padding: 0.3rem;
-  --badge-v-align: 0.5rem;
+  --badge-vertical-align: 0.5rem;
   --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);
   border-radius: var(--badge-radius);
-  vertical-align: var(--badge-v-align);
+  vertical-align: var(--badge-vertical-align);
   font-size: var(--badge-fs);
   span {
     color: inherit;

package/src/components/badge/badge.scss.backup

@@ -0,0 +1,39 @@
+sup:has(> span) {
+  --badge-bg: lightgray;
+  --badge-color: currentColor;
+  --badge-radius: 0.5rem;
+  --badge-padding: 0.3rem;
+  --badge-v-align: 0.5rem;
+  --badge-fs: var(--fs-1);
+  background-color: var(--badge-bg);
+  color: var(--badge-color);
+  padding: var(--badge-padding);
+  border-radius: var(--badge-radius);
+  vertical-align: var(--badge-v-align);
+  font-size: var(--badge-fs);
+  span {
+    color: inherit;
+  }
+  &[data-badge~="rounded"] {
+    --badge-radius: 50%;
+    --badge-padding: 0;
+    --badge-size: 1.5625rem;
+    width: var(--badge-size);
+    height: var(--badge-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    overflow: hidden;
+    box-sizing: border-box;
+    span {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: clip;
+      white-space: nowrap;
+      padding: 0 0.125rem;
+    }
+  }
+}

package/src/components/badge/badge.stories.tsx

@@ -8,6 +8,46 @@ const meta: Meta<typeof Badge> = {
   title: "FP.REACT Components/Badge",
   component: Badge,
   tags: ["beta", "accessible"],
+  parameters: {
+    docs: {
+      description: {
+        component: `A notification badge component for displaying counts or status indicators with accessibility support.
+
+## CSS Variables
+
+Customize the Badge appearance using CSS custom properties:
+
+### Layout & Structure
+- \`--badge-bg\`: Background color (default: \`lightgray\`)
+- \`--badge-color\`: Text color (default: \`currentColor\`)
+- \`--badge-radius\`: Border radius (default: \`0.5rem\`)
+- \`--badge-padding\`: Internal padding (default: \`0.3rem\`)
+- \`--badge-vertical-align\`: Vertical alignment (default: \`0.5rem\`)
+
+### Typography
+- \`--badge-fs\`: Font size (default: \`var(--fs-1)\`)
+
+### Rounded Variant
+When using \`variant="rounded"\`:
+- \`--badge-size\`: Fixed circular size (default: \`1.5625rem\`)
+- Border radius automatically becomes \`50%\`
+- Padding becomes \`0\`
+- Content truncated with ellipsis if too long
+
+**Example:**
+\`\`\`css
+sup:has(> span) {
+  --badge-bg: #ef4444;
+  --badge-color: white;
+  --badge-radius: 0.25rem;
+  --badge-padding: 0.5rem;
+  --badge-vertical-align: 0.75rem;
+  --badge-fs: 0.875rem;
+}
+\`\`\``,
+      },
+    },
+  },
   args: {
     children: "5",
   },

package/src/components/breadcrumbs/breadcrumb.scss

@@ -1,7 +1,7 @@
 nav:not(body > nav),
 nav[data-breadcrumb] {
-  --breadcrumb-px: unset;
-  --breadcrumb-dsp: flex;
+  --breadcrumb-padding-inline: unset;
+  --breadcrumb-display: flex;
   --breadcrumb-gap: 0.5rem;
   --breadcrumb-color: currentColor;
   --breadcrumb-current-color: rgb(46, 46, 46);
@@ -9,12 +9,12 @@ nav[data-breadcrumb] {
   margin-inline: unset;
   padding-inline: unset;
   ol {
-    padding-inline: var(--breadcrumb-px);
-    display: var(--breadcrumb-dsp);
+    padding-inline: var(--breadcrumb-padding-inline);
+    display: var(--breadcrumb-display);
     gap: var(--breadcrumb-gap);
     li {
       padding-inline: unset;
-      width: var(--breadcrumb-w, fit-content);
+      width: var(--breadcrumb-width, fit-content);
       text-transform: capitalize;
       display: flex;
       color: var(--breadcrumb-color);

package/src/components/breadcrumbs/breadcrumb.scss.backup

@@ -0,0 +1,35 @@
+nav:not(body > nav),
+nav[data-breadcrumb] {
+  --breadcrumb-px: unset;
+  --breadcrumb-dsp: flex;
+  --breadcrumb-gap: 0.5rem;
+  --breadcrumb-color: currentColor;
+  --breadcrumb-current-color: rgb(46, 46, 46);
+  --breadcrumb-fs: var(--fs-3);
+  margin-inline: unset;
+  padding-inline: unset;
+  ol {
+    padding-inline: var(--breadcrumb-px);
+    display: var(--breadcrumb-dsp);
+    gap: var(--breadcrumb-gap);
+    li {
+      padding-inline: unset;
+      width: var(--breadcrumb-w, fit-content);
+      text-transform: capitalize;
+      display: flex;
+      color: var(--breadcrumb-color);
+      gap: 0.5rem;
+      font-size: var(--breadcrumb-fs);
+      span[aria-hidden="true"] {
+        opacity: 0.6;
+      }
+      a[href] {
+        font-size: var(--breadcrumb-fs);
+        &[aria-current] {
+          color: var(--breadcrumb-current-color);
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -17,7 +17,23 @@ const meta: Meta<typeof Breadcrumb> = {
 
 **Features:** Automatic path parsing, custom route naming, text truncation, full accessibility support, and performance optimized with memoization.
 
-**Accessibility:** Semantic HTML (\`<nav>\`, \`<ol>\`), proper ARIA labels, current page marked with \`aria-current="page"\`, and truncated text includes full text in \`aria-label\`.`,
+**Accessibility:** Semantic HTML (\`<nav>\`, \`<ol>\`), proper ARIA labels, current page marked with \`aria-current="page"\`, and truncated text includes full text in \`aria-label\`.
+
+## CSS Variables
+
+### Layout & Display
+- \`--breadcrumb-display\`: Display mode for breadcrumb list (default: flex)
+- \`--breadcrumb-width\`: Width of list items (default: fit-content)
+
+### Spacing
+- \`--breadcrumb-padding-inline\`: Horizontal padding (default: unset)
+- \`--breadcrumb-gap\`: Gap between breadcrumb items (default: 0.5rem)
+
+### Typography & Color
+- \`--breadcrumb-fs\`: Font size (default: var(--fs-3))
+- \`--breadcrumb-color\`: Text color (default: currentColor)
+- \`--breadcrumb-current-color\`: Current page color (default: rgb(46, 46, 46))
+`,
       },
     },
   },

package/src/components/buttons/button.scss

@@ -1,10 +1,11 @@
 button {
-  --btn-xs: 0.6875rem;
-  --btn-sm: 0.8125rem;
-  --btn-md: 0.9375rem;
-  --btn-lg: 1.125rem;
+  // Size tokens - renamed for clarity
+  --btn-size-xs: 0.6875rem;
+  --btn-size-sm: 0.8125rem;
+  --btn-size-md: 0.9375rem;
+  --btn-size-lg: 1.125rem;
   --btn-pill: 100rem;
-  --btn-fs: var(--btn-md);
+  --btn-fs: var(--btn-size-md);
   --btn-height: calc(var(--btn-fs) * 2.25);
   --btn-bg: lightgray;
   --btn-width: max-content;
@@ -13,16 +14,16 @@ button {
   font-weight: var(--btn-fw, 500);
   height: var(--btn-height);
   place-items: var(--btn-place, center);
-  padding-inline: var(--btn-px, calc(var(--btn-fs) * 1.5));
-  padding-block: var(--btn-py, calc(var(--btn-fs) * 0.5));
-  border: var(--btn-bdr, none);
-  border-radius: var(--btn-rds, calc(6rem / 16));
+  padding-inline: var(--btn-padding-inline, calc(var(--btn-fs) * 1.5));
+  padding-block: var(--btn-padding-block, calc(var(--btn-fs) * 0.5));
+  border: var(--btn-border, none);
+  border-radius: var(--btn-radius, calc(6rem / 16));
   text-decoration: var(--btn-deco, none);
-  color: var(--btn-cl, currentColor);
-  display: var(--btn-dsp, inline-flex);
+  color: var(--btn-color, currentColor);
+  display: var(--btn-display, inline-flex);
   gap: var(--btn-gap, 0.2rem);
-  white-space: var(--btn-wspc, inherit);
-  margin: var(--btn-spc, 0);
+  white-space: var(--btn-whitespace, inherit);
+  margin: var(--btn-spacing, 0);
   transition: var(
     --btn-transition,
     var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1))
@@ -36,7 +37,7 @@ button {
 
   &[type] {
     background-color: var(--btn-bg, var(--neutral-300));
-    --btn-bdr: solid var(--btn-sg);
+    --btn-border: solid var(--btn-sg);
   }
 
   &[type="submit"],
@@ -76,13 +77,12 @@ button {
   &[type="reset"] {
     --btn-bg: transparent;
     --btn-color: gray;
-    --btn-bdr: gray thin solid;
+    --btn-border: gray thin solid;
   }
 
   &[type="submit"] {
     --btn-bg: var(--primary-700, blue);
-    --btn-cl: #fff;
-    --btn-color: rgb(231, 231, 231);
+    --btn-color: #fff;
     --btn-border: none;
   }
 
@@ -94,23 +94,23 @@ button {
 
   &[data-btn~="xs"],
   .btn-xs {
-    --btn-fs: var(--btn-xs);
+    --btn-fs: var(--btn-size-xs);
     text-transform: uppercase;
   }
 
   &[data-btn~="sm"],
   .btn-sm {
-    --btn-fs: var(--btn-sm);
+    --btn-fs: var(--btn-size-sm);
   }
 
   &[data-btn~="md"],
   .btn-md {
-    --btn-fs: var(--btn-md);
+    --btn-fs: var(--btn-size-md);
   }
 
   &[data-btn~="lg"],
   .btn-lg {
-    --btn-fs: var(--btn-lg);
+    --btn-fs: var(--btn-size-lg);
   }
 
   &[data-btn~="icon"],
@@ -129,15 +129,15 @@ button {
   &[data-btn~="text"],
   .btn-text {
     --btn-bg: transparent;
-    --btn-cl: currentColor;
-    --btn-bdr: none;
+    --btn-color: currentColor;
+    --btn-border: none;
     --btn-height: unset;
     --btn-width: unset;
-    --btn-py: 0.75rem;
-    --btn-px: 0.75rem;
+    --btn-padding-block: 0.75rem;
+    --btn-padding-inline: 0.75rem;
     &:is(:hover, :focus) {
-      background-color: color-mix(in srgb, var(--btn-cl) 10%, transparent);
-      outline: 0.025rem solid var(--btn-cl);
+      background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
+      outline: 0.025rem solid var(--btn-color);
       outline-offset: 0;
       filter: none; // Override parent filter
     }

package/src/components/buttons/button.scss.backup

@@ -0,0 +1,145 @@
+button {
+  --btn-xs: 0.6875rem;
+  --btn-sm: 0.8125rem;
+  --btn-md: 0.9375rem;
+  --btn-lg: 1.125rem;
+  --btn-pill: 100rem;
+  --btn-fs: var(--btn-md);
+  --btn-height: calc(var(--btn-fs) * 2.25);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height);
+  place-items: var(--btn-place, center);
+  padding-inline: var(--btn-px, calc(var(--btn-fs) * 1.5));
+  padding-block: var(--btn-py, calc(var(--btn-fs) * 0.5));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, calc(6rem / 16));
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(
+    --btn-transition,
+    var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1))
+  );
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+  display: inline-flex;
+  align-items: center;
+  line-height: 0cap;
+
+  &[type] {
+    background-color: var(--btn-bg, var(--neutral-300));
+    --btn-bdr: solid var(--btn-sg);
+  }
+
+  &[type="submit"],
+  &[style*="submit"] {
+    --btn-bg: var(--primary-500, royal-blue);
+    --btn-color: white;
+  }
+
+  &[disabled],
+  &[aria-disabled="true"] {
+    cursor: var(--btn-cursor, not-allowed);
+    // opacity: var(--btn-opacity, 0.5);
+
+    &:is(:hover, :focus) {
+      transform: none;
+      // background-color: var(--btn-bg, lightgray);
+      // opacity: var(--btn-opacity, 0.5);
+    }
+  }
+
+  // TODO: add hover/focus with :if()
+  &:is(:hover, :focus) {
+    // Darken the background on hover by reducing brightness
+    filter: var(--btn-hover-filter, brightness(0.85));
+    transform: var(--btn-hover-transform, scale(1.03));
+    outline: var(--btn-hover-outline, thin);
+    outline-offset: var(--line-offset, 1px);
+    // outline-style: var(--line-style, solid);
+
+    &[aria-disabled="true"] {
+      transform: none;
+      opacity: var(--btn-opacity, 0.5);
+      filter: none;
+    }
+  }
+
+  &[type="reset"] {
+    --btn-bg: transparent;
+    --btn-color: gray;
+    --btn-bdr: gray thin solid;
+  }
+
+  &[type="submit"] {
+    --btn-bg: var(--primary-700, blue);
+    --btn-cl: #fff;
+    --btn-color: rgb(231, 231, 231);
+    --btn-border: none;
+  }
+
+  &[data-fp-btn~="pill"],
+  &[data-btn~="pill"],
+  &[data-style~="pill"] {
+    border-radius: var(--btn-pill, 100rem);
+  }
+
+  &[data-btn~="xs"],
+  .btn-xs {
+    --btn-fs: var(--btn-xs);
+    text-transform: uppercase;
+  }
+
+  &[data-btn~="sm"],
+  .btn-sm {
+    --btn-fs: var(--btn-sm);
+  }
+
+  &[data-btn~="md"],
+  .btn-md {
+    --btn-fs: var(--btn-md);
+  }
+
+  &[data-btn~="lg"],
+  .btn-lg {
+    --btn-fs: var(--btn-lg);
+  }
+
+  &[data-btn~="icon"],
+  .btn-icon {
+    padding: unset;
+    height: unset;
+    --btn-bg: transparent;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &[data-btn~="text"],
+  .btn-text {
+    --btn-bg: transparent;
+    --btn-cl: currentColor;
+    --btn-bdr: none;
+    --btn-height: unset;
+    --btn-width: unset;
+    --btn-py: 0.75rem;
+    --btn-px: 0.75rem;
+    &:is(:hover, :focus) {
+      background-color: color-mix(in srgb, var(--btn-cl) 10%, transparent);
+      outline: 0.025rem solid var(--btn-cl);
+      outline-offset: 0;
+      filter: none; // Override parent filter
+    }
+  }
+}