@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/components/layout/_header.scss.backup

@@ -0,0 +1,72 @@
+header,
+[data-hero],
+[data-grid~='overlay'] {
+  // Name of the grid area
+  --overlay-grid-area: overlay;
+  // Placement of items in grid area
+  --overlay-placement: center;
+  // Controls display of grid
+  --overlay-display: grid;
+  // Overlay padding
+  --overlay-padding: 2rem;
+  --overlay-w: 100%;
+  --overlay-h: 40vh;
+  --overlay-max-h: 500px;
+  --overlay-color: currentColor;
+  --overlay-content-w: 80%;
+  --overlay-gap: 2rem;
+  --overlay-bg: whitesmoke;
+  --overlay-px: auto;
+  --overlay-py: auto;
+  --overlay-mx: auto;
+  --overlay-my: auto;
+
+  grid-template-areas: 'overlay';
+  display: var(--overlay-display);
+  place-items: var(--overlay-placement);
+  align-items: var(--overlay-placement);
+  min-height: var(--overlay-h);
+  width: var(--overlay-w);
+  color: var(--overlay-color);
+  background-color: var(--overlay-bg);
+  min-width: 20rem;
+  > * {
+    grid-area: overlay;
+  }
+  > img {
+    width: var(--overlay-w);
+    // height: auto;
+    background-size: contain;
+  }
+  > div,
+  > section {
+    --overlay-display: flex;
+    max-width: var(--overlay-content-w);
+    padding-inline: var(--spc-4);
+    margin-inline: var(--overlay-mx);
+    gap: var(--overlay-gap);
+    text-align: center;
+    p {
+      width: auto;
+      max-width: 60ch;
+      font-size: var(--fs-8);
+      line-height: 1.4;
+    }
+    > h1,
+    > h2 {
+      line-height: var(--header-lh, 1.1);
+      font-weight: 500;
+    }
+
+    > h1 {
+      font-size: var(--fs-12);
+    }
+    > h2 {
+      font-size: var(--fs-11);
+    }
+    > h3 {
+      font-size: var(--fs-10);
+    }
+
+  }
+}

package/src/components/layout/landmarks.scss

@@ -3,14 +3,14 @@
 
 main,
 footer {
-  --content-w: min(100%, 1480px);
-  --content-mx: auto;
-  --content-px: 1rem;
+  --content-width: min(100%, 1480px);
+  --content-margin-inline: auto;
+  --content-padding-inline: 1rem;
   --content-gap: 2rem;
   padding-block: var(--overlay-padding);
   > section {
-    width: var(--content-w);
-    margin-inline: var(--content-mx);
+    width: var(--content-width);
+    margin-inline: var(--content-margin-inline);
     padding-inline: var(--spc-6);
   }
 }
@@ -20,8 +20,8 @@ main {
   font-size: var(--fs-3);
   > section[aria-label],
   > section {
-    width: var(--content-w);
-    margin-inline: var(--content-mx);
+    width: var(--content-width);
+    margin-inline: var(--content-margin-inline);
     &:has(> article, > aside) {
       display: flex;
       flex-wrap: wrap;

package/src/components/layout/landmarks.scss.backup

@@ -0,0 +1,51 @@
+@use './header';
+
+
+main,
+footer {
+  --content-w: min(100%, 1480px);
+  --content-mx: auto;
+  --content-px: 1rem;
+  --content-gap: 2rem;
+  padding-block: var(--overlay-padding);
+  > section {
+    width: var(--content-w);
+    margin-inline: var(--content-mx);
+    padding-inline: var(--spc-6);
+  }
+}
+
+main {
+  flex: 1;
+  font-size: var(--fs-3);
+  > section[aria-label],
+  > section {
+    width: var(--content-w);
+    margin-inline: var(--content-mx);
+    &:has(> article, > aside) {
+      display: flex;
+      flex-wrap: wrap;
+      flex: 1;
+      gap: var(--content-gap);
+      > article {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: 50%;
+      }
+      > aside {
+        flex-basis: 20rem;
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+footer {
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 5rem;
+    text-align: center;
+  }
+}

package/src/components/layout/landmarks.stories.tsx

@@ -15,6 +15,48 @@ import Img from "#components/images/img";
 const meta: Meta<typeof Header> = {
   title: "FP.React Components/Layout/Landmarks",
   component: Header,
+  parameters: {
+    docs: {
+      description: {
+        component: `Semantic landmark components including Header (banner), Main, and Footer with responsive content layout.
+
+## CSS Variables (Header/Overlay)
+
+### Layout & Display
+- \`--overlay-display\`: Display mode (default: grid)
+- \`--overlay-grid-area\`: Grid area name (default: overlay)
+- \`--overlay-placement\`: Item placement (default: center)
+
+### Sizing
+- \`--overlay-width\`: Overlay width (default: 100%)
+- \`--overlay-height\`: Minimum overlay height (default: 40vh)
+- \`--overlay-max-height\`: Maximum overlay height (default: 500px)
+- \`--overlay-content-width\`: Content max width (default: 80%)
+
+### Spacing
+- \`--overlay-padding\`: General padding (default: 2rem)
+- \`--overlay-padding-inline\`: Horizontal padding (default: auto)
+- \`--overlay-padding-block\`: Vertical padding (default: auto)
+- \`--overlay-margin-inline\`: Horizontal margin (default: auto)
+- \`--overlay-margin-block\`: Vertical margin (default: auto)
+- \`--overlay-gap\`: Gap between elements (default: 2rem)
+
+### Colors & Typography
+- \`--overlay-color\`: Text color (default: currentColor)
+- \`--overlay-bg\`: Background color (default: whitesmoke)
+- \`--header-line-height\`: Heading line height (default: 1.1)
+
+## CSS Variables (Main/Footer)
+
+### Content Layout
+- \`--content-width\`: Max content width (default: min(100%, 1480px))
+- \`--content-margin-inline\`: Horizontal margin for centering (default: auto)
+- \`--content-padding-inline\`: Horizontal padding (default: 1rem)
+- \`--content-gap\`: Gap between article and aside (default: 2rem)
+`,
+      },
+    },
+  },
   args: {
     children: "Default Header",
     "data-testid": "banner",

package/src/components/link/link.scss

@@ -15,7 +15,7 @@
 a[href] {
   // Color & Typography
   --link-color: #085ab7;
-  --link-weight: 400;
+  --link-fw: 400;
   --link-fs: 1rem;
 
   // Text Decoration
@@ -29,8 +29,8 @@ a[href] {
   --link-radius: 0.25rem;
 
   // Spacing (for button variants)
-  --link-px: 0;
-  --link-py: 0;
+  --link-padding-inline: 0;
+  --link-padding-block: 0;
 
   // Transitions
   --link-transition: all 0.75s ease-in-out;
@@ -44,7 +44,7 @@ a[href] {
   // Apply base styles
   color: var(--link-color);
   font-size: var(--link-fs);
-  font-weight: var(--link-weight);
+  font-weight: var(--link-fw);
   text-decoration: var(--link-decoration);
   text-underline-offset: var(--link-decoration-offset);
   text-decoration-thickness: var(--link-decoration-thickness);
@@ -56,7 +56,7 @@ a[href] {
   // Ensure child elements inherit weight/style
   > i,
   > b {
-    font-weight: var(--link-weight);
+    font-weight: var(--link-fw);
     font-style: normal;
   }
 

package/src/components/link/link.scss.backup

@@ -0,0 +1,145 @@
+@use '../../sass/mixins';
+
+/**
+ * Link Component Styles
+ *
+ * Provides accessible, customizable link styles using CSS custom properties.
+ * Supports standard text links, button-styled links, and pill variants.
+ *
+ * WCAG 2.1 AA Compliance:
+ * - Focus indicators meet 2.4.7 (3:1 contrast minimum)
+ * - Color contrast meets 1.4.3 (4.5:1 for normal text)
+ * - Uses :focus-visible for better UX (keyboard vs mouse)
+ */
+
+a[href] {
+  // Color & Typography
+  --link-color: #085ab7;
+  --link-weight: 400;
+  --link-fs: 1rem;
+
+  // Text Decoration
+  --link-decoration: none;
+  --link-decoration-offset: 0.09375rem; // 1.5px converted to rem
+  --link-decoration-thickness: 0.0625rem; // 1px converted to rem
+  --link-skip-ink: auto;
+
+  // Background & Border
+  --link-bg: transparent;
+  --link-radius: 0.25rem;
+
+  // Spacing (for button variants)
+  --link-px: 0;
+  --link-py: 0;
+
+  // Transitions
+  --link-transition: all 0.75s ease-in-out;
+
+  // Focus Indicator (WCAG 2.4.7 - 3:1 contrast minimum)
+  --link-focus-color: currentColor;
+  --link-focus-width: 0.125rem; // 2px
+  --link-focus-offset: 0.125rem; // 2px
+  --link-focus-style: solid;
+
+  // Apply base styles
+  color: var(--link-color);
+  font-size: var(--link-fs);
+  font-weight: var(--link-weight);
+  text-decoration: var(--link-decoration);
+  text-underline-offset: var(--link-decoration-offset);
+  text-decoration-thickness: var(--link-decoration-thickness);
+  text-decoration-skip-ink: var(--link-skip-ink);
+  background-color: var(--link-bg);
+  border-radius: var(--link-radius);
+  transition: var(--link-transition);
+
+  // Ensure child elements inherit weight/style
+  > i,
+  > b {
+    font-weight: var(--link-weight);
+    font-style: normal;
+  }
+
+  // Hover state - add underline for clarity
+  &:hover {
+    --link-decoration: underline;
+  }
+
+  // Focus state - WCAG 2.4.7 compliant focus indicator
+  &:focus {
+    outline: var(--link-focus-width) var(--link-focus-style)
+      var(--link-focus-color);
+    outline-offset: var(--link-focus-offset);
+    --link-decoration: underline;
+  }
+
+  // Focus-visible for better UX (only show outline on keyboard focus)
+  &:focus-visible {
+    outline: var(--link-focus-width) var(--link-focus-style)
+      var(--link-focus-color);
+    outline-offset: var(--link-focus-offset);
+  }
+
+  // Visited and active states
+  &:visited,
+  &:active {
+    --link-color: currentColor;
+  }
+
+  // Button-styled links (via <b> wrapper, data-btn attribute, or <i> for pill)
+  &:has(> b),
+  &[data-btn],
+  &:has(> i) {
+    --link-button-color: var(--link-color);
+    --link-bg: transparent;
+    --link-decoration: none;
+    --link-border-width: 0.125rem; // 2px
+    --link-border-color: currentColor;
+    --link-border-style: solid;
+    --link-fs: 0.9rem;
+
+    color: var(--link-button-color);
+    background-color: var(--link-bg);
+    font-style: normal;
+    font-size: var(--link-fs);
+    padding-inline: var(--link-fs);
+    padding-block: calc(var(--link-fs) - 0.4rem);
+    border-radius: var(--link-radius, 99rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    outline: var(--link-border-width) var(--link-border-color)
+      var(--link-border-style);
+
+    // Focus state for button links
+    &:focus,
+    &:focus-visible {
+      outline: var(--link-border-width) var(--link-border-color)
+        var(--link-border-style);
+      outline-offset: var(--link-focus-offset);
+      --link-decoration: none;
+    }
+
+    // Hover state for button links
+    &:hover {
+      --link-decoration: none;
+    }
+
+    // Apply scale transition from mixins
+    @include mixins.scale-transitions;
+  }
+
+  // Pill variant (rounded corners)
+  &[data-link~='pill'],
+  &:has(> i) {
+    --link-radius: 99rem;
+    --link-decoration: none;
+    font-style: normal;
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --link-decoration: none;
+    }
+  }
+}

package/src/components/link/link.stories.tsx

@@ -39,8 +39,44 @@ const meta = {
   parameters: {
     docs: {
       description: {
-        component:
-          "A semantic, accessible anchor component with enhanced security for external links and flexible styling variants.",
+        component: `A semantic, accessible anchor component with enhanced security for external links and flexible styling variants.
+
+## CSS Variables
+
+### Typography & Color
+- \`--link-color\`: Link text color (default: #085ab7)
+- \`--link-fw\`: Font weight (default: 400)
+- \`--link-fs\`: Font size (default: 1rem)
+
+### Text Decoration
+- \`--link-decoration\`: Text decoration style (default: none, underline on hover/focus)
+- \`--link-decoration-offset\`: Underline offset (default: 0.09375rem / 1.5px)
+- \`--link-decoration-thickness\`: Underline thickness (default: 0.0625rem / 1px)
+- \`--link-skip-ink\`: Text decoration skip ink (default: auto)
+
+### Background & Border
+- \`--link-bg\`: Background color (default: transparent)
+- \`--link-radius\`: Border radius (default: 0.25rem, 99rem for pills)
+
+### Spacing (Button Variants)
+- \`--link-padding-inline\`: Horizontal padding (default: 0, calculated for button variants)
+- \`--link-padding-block\`: Vertical padding (default: 0, calculated for button variants)
+
+### Focus Indicators (WCAG 2.4.7)
+- \`--link-focus-color\`: Focus outline color (default: currentColor)
+- \`--link-focus-width\`: Focus outline width (default: 0.125rem / 2px)
+- \`--link-focus-offset\`: Focus outline offset (default: 0.125rem / 2px)
+- \`--link-focus-style\`: Focus outline style (default: solid)
+
+### Transitions
+- \`--link-transition\`: Transition timing (default: all 0.75s ease-in-out)
+
+### Button Variants
+- \`--link-button-color\`: Button link text color (default: var(--link-color))
+- \`--link-border-width\`: Button border width (default: 0.125rem / 2px)
+- \`--link-border-color\`: Button border color (default: currentColor)
+- \`--link-border-style\`: Button border style (default: solid)
+`,
       },
     },
   },

package/src/components/nav/nav.scss

@@ -1,8 +1,8 @@
 body > nav,
 [aria-label~="navbar"],
 .navbar {
-  padding-inline: var(--nav-px, 1rem);
-  min-height: var(--nav-h, fit-content);
+  padding-inline: var(--nav-padding-inline, 1rem);
+  min-height: var(--nav-height, fit-content);
 
   @media (max-width: 580px) {
     flex-direction: column;
@@ -19,10 +19,10 @@ body > nav,
       margin: 0;
       padding: 0;
       min-height: 100%;
-      padding-inline: var(--nav-px, 0.75rem);
+      padding-inline: var(--nav-padding-inline, 0.75rem);
 
       &:hover {
-        background-color: var(--nav-hov-bg, #e8e8e8);
+        background-color: var(--nav-hover-bg, #e8e8e8);
       }
       &:hover:where(img) {
         background-color: transparent;
@@ -38,25 +38,25 @@ nav {
   --nav-focus-offset: 0.125rem; // 2px
   --nav-focus-style: solid;
 
-  display: var(--nav-dsp, flex);
+  display: var(--nav-display, flex);
   flex-direction: var(--nav-direction, row);
-  width: var(--nav-w, auto);
+  width: var(--nav-width, auto);
   place-items: var(--nav-align, center);
   justify-content: var(--nav-justify, space-between);
-  margin-inline: var(--nav-mx, 0);
+  margin-inline: var(--nav-margin-inline, 0);
   background-color: var(--nav-bg, initial);
 
   > section,
   > ul {
-    --nav-dsp: flex;
+    --nav-display: flex;
     flex-direction: var(--nav-direction, row);
-    display: var(--nav-dsp, flex);
+    display: var(--nav-display, flex);
     gap: var(--nav-gap, 0);
     font-size: var(--nav-fs, 0.9rem);
     align-items: var(--nav-align, center);
-    padding-inline: var(--nav-px, 1rem);
-    padding-block: var(--nav-py, 0);
-    margin-block-end: var(--nav-mb, 0);
+    padding-inline: var(--nav-padding-inline, 1rem);
+    padding-block: var(--nav-padding-block, 0);
+    margin-block-end: var(--nav-margin-block-end, 0);
     height: 100%;
     &[data-list~="block"] {
       --nav-direction: column;
@@ -65,7 +65,7 @@ nav {
 
   > section {
     > div {
-      --py: 0;
+      --nav-padding-block: 0;
     }
   }
 
@@ -77,18 +77,18 @@ nav {
       margin: 0;
       padding: 0;
       min-height: 100%;
-      padding-inline: var(--nav-px, 1rem);
+      padding-inline: var(--nav-padding-inline, 1rem);
     }
   }
 
   img[alt] {
-    --px: 0 var(--s1);
-    --w: var(--brand-w, 3.6rem);
+    --nav-img-padding-inline: 0 var(--s1);
+    --nav-img-width: var(--brand-w, 3.6rem);
   }
 
   &[data-variant] {
     background-color: var(--nav-bg);
-    color: var(--nav-cl);
+    color: var(--nav-color);
     font-size: var(--nav-fs, 0.9rem);
   }
 

package/src/components/nav/nav.scss.backup

@@ -0,0 +1,123 @@
+body > nav,
+[aria-label~="navbar"],
+.navbar {
+  padding-inline: var(--nav-px, 1rem);
+  min-height: var(--nav-h, fit-content);
+
+  @media (max-width: 580px) {
+    flex-direction: column;
+    height: fit-content;
+    min-height: fit-content;
+    padding-block: unset;
+    gap: 0.5rem;
+  }
+  ul {
+    > li {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+      padding-inline: var(--nav-px, 0.75rem);
+
+      &:hover {
+        background-color: var(--nav-hov-bg, #e8e8e8);
+      }
+      &:hover:where(img) {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+nav {
+  // Focus Indicator Variables (WCAG 2.4.7 - 3:1 contrast minimum)
+  --nav-focus-color: currentColor;
+  --nav-focus-width: 0.125rem; // 2px
+  --nav-focus-offset: 0.125rem; // 2px
+  --nav-focus-style: solid;
+
+  display: var(--nav-dsp, flex);
+  flex-direction: var(--nav-direction, row);
+  width: var(--nav-w, auto);
+  place-items: var(--nav-align, center);
+  justify-content: var(--nav-justify, space-between);
+  margin-inline: var(--nav-mx, 0);
+  background-color: var(--nav-bg, initial);
+
+  > section,
+  > ul {
+    --nav-dsp: flex;
+    flex-direction: var(--nav-direction, row);
+    display: var(--nav-dsp, flex);
+    gap: var(--nav-gap, 0);
+    font-size: var(--nav-fs, 0.9rem);
+    align-items: var(--nav-align, center);
+    padding-inline: var(--nav-px, 1rem);
+    padding-block: var(--nav-py, 0);
+    margin-block-end: var(--nav-mb, 0);
+    height: 100%;
+    &[data-list~="block"] {
+      --nav-direction: column;
+    }
+  }
+
+  > section {
+    > div {
+      --py: 0;
+    }
+  }
+
+  ul {
+    > li {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+      padding-inline: var(--nav-px, 1rem);
+    }
+  }
+
+  img[alt] {
+    --px: 0 var(--s1);
+    --w: var(--brand-w, 3.6rem);
+  }
+
+  &[data-variant] {
+    background-color: var(--nav-bg);
+    color: var(--nav-cl);
+    font-size: var(--nav-fs, 0.9rem);
+  }
+
+  > div {
+    margin-block-start: 0;
+  }
+
+  // Focus indicators for links and buttons (WCAG 2.4.7)
+  a:focus {
+    outline: var(--nav-focus-width) var(--nav-focus-style)
+      var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+
+  a:focus-visible {
+    outline: var(--nav-focus-width) var(--nav-focus-style)
+      var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+
+  button:focus {
+    outline: var(--nav-focus-width) var(--nav-focus-style)
+      var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+
+  button:focus-visible {
+    outline: var(--nav-focus-width) var(--nav-focus-style)
+      var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+}

package/src/components/nav/nav.stories.tsx

@@ -14,7 +14,41 @@ const meta: Meta<typeof Nav> = {
     actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: "Nav description here...",
+        component: `Navigation component with accessible markup and customizable styling via CSS variables.
+
+## CSS Variables
+
+### Layout & Sizing
+- \`--nav-display\`: Display mode (default: flex)
+- \`--nav-width\`: Nav width (default: auto)
+- \`--nav-height\`: Minimum height (default: fit-content)
+- \`--nav-direction\`: Flex direction (default: row)
+- \`--nav-align\`: Vertical alignment (default: center)
+- \`--nav-justify\`: Horizontal justification (default: space-between)
+
+### Spacing
+- \`--nav-padding-inline\`: Horizontal padding (default: 1rem)
+- \`--nav-padding-block\`: Vertical padding (default: 0)
+- \`--nav-margin-inline\`: Horizontal margin (default: 0)
+- \`--nav-margin-block-end\`: Bottom margin (default: 0)
+- \`--nav-gap\`: Gap between nav items (default: 0)
+
+### Typography & Color
+- \`--nav-fs\`: Font size (default: 0.9rem)
+- \`--nav-color\`: Text color
+- \`--nav-bg\`: Background color (default: initial)
+- \`--nav-hover-bg\`: Background color on hover (default: #e8e8e8)
+
+### Focus Indicators (WCAG 2.4.7)
+- \`--nav-focus-color\`: Focus outline color (default: currentColor)
+- \`--nav-focus-width\`: Focus outline width (default: 0.125rem / 2px)
+- \`--nav-focus-offset\`: Focus outline offset (default: 0.125rem / 2px)
+- \`--nav-focus-style\`: Focus outline style (default: solid)
+
+### Image Elements
+- \`--nav-img-padding-inline\`: Image padding (default: 0 var(--s1))
+- \`--nav-img-width\`: Image width (default: var(--brand-w, 3.6rem))
+`,
       },
     },
   },