@fpkit/acss 0.6.2 → 1.0.0

package/src/components/tag/tag.scss.backup

@@ -0,0 +1,130 @@
+/**
+ * Tag Component Styles - WCAG 2.1 AA Compliant
+ *
+ * Provides visual styling for the Tag component with CSS custom properties
+ * for easy theming and variant support. All measurements use rem units
+ * for scalability and accessibility.
+ *
+ * Accessibility Features:
+ * - Color contrast ratios meet WCAG AA 4.5:1 minimum (WCAG 1.4.3)
+ * - Visual indicators beyond color (symbols via ::before) (WCAG 1.4.1)
+ * - Visible focus indicators with 3:1 contrast (WCAG 2.4.7)
+ */
+
+/**
+ * Base Tag Styles
+ * Applied to all tag elements via role and data-tag attributes
+ */
+p[role='note'],
+[role='note'],
+small > span,
+[data-tag] {
+  /* Variant color tokens - WCAG AA compliant colors */
+  --beta: #fbbf24;            /* Amber: 6.94:1 contrast with black */
+  --stable: #0f7c3e;          /* Dark green: 4.56:1 contrast with white */
+  --production: #1e3a8a;      /* Dark blue: 8.59:1 contrast with white */
+
+  /* Tag component tokens */
+  --tag-px: 0.7rem;           /* Horizontal padding (11.2px at 16px base) */
+  --tag-py: 0.2rem;           /* Vertical padding (3.2px at 16px base) */
+  --tag-fs: 0.8rem;           /* Font size (12.8px at 16px base) */
+  --tag-radius: 99rem;        /* Fully rounded pill shape */
+  --tag-bg: lightgray;        /* Default background color */
+  --tag-fw: 500;              /* Medium font weight */
+  --tag-color: currentColor;  /* Default text color (inherits) */
+  --tag-display: inline-block;/* Display type */
+
+  /* Apply CSS custom properties */
+  display: var(--tag-display);
+  padding-inline: var(--tag-px);
+  padding-block: var(--tag-py);
+  font-size: var(--tag-fs);
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: var(--tag-radius);
+
+  /**
+   * Focus Indicators (WCAG 2.4.7)
+   * Visible focus for keyboard navigation with 3:1 minimum contrast
+   */
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* Remove outline for mouse users while preserving for keyboard users */
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /**
+   * Variant Modifiers
+   * Applied via data-tag attribute (e.g., data-tag="beta")
+   * Each variant includes both color AND visual symbol for accessibility (WCAG 1.4.1)
+   */
+
+  /* Alpha variant - early development stage */
+  &[data-tag~='alpha'] {
+    --tag-color: #000000;      /* Black: maximum contrast with amber background */
+    --tag-bg: var(--beta);
+
+    /* Visual indicator beyond color - warning symbol */
+    &::before {
+      content: '⚠';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Beta variant - pre-release version */
+  &[data-tag~='beta'] {
+    --tag-color: #000000;      /* Black: maximum contrast with amber background */
+    --tag-bg: var(--beta);
+
+    /* Visual indicator beyond color - warning symbol */
+    &::before {
+      content: '⚠';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Stable variant - production-ready release */
+  &[data-tag~='stable'] {
+    --tag-color: #ffffff;      /* White: 4.56:1 contrast with dark green */
+    --tag-bg: var(--stable);
+
+    /* Visual indicator beyond color - checkmark symbol */
+    &::before {
+      content: '✓';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Production variant - live environment indicator */
+  &[data-tag~='production'] {
+    --tag-color: #ffffff;      /* White: 8.59:1 contrast with dark blue */
+    --tag-bg: var(--production);
+
+    /* Visual indicator beyond color - live indicator symbol */
+    &::before {
+      content: '●';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+}
+
+/**
+ * Block-level tag modifier
+ * Applied when Tag renders as <p> element
+ */
+p[role='note'] {
+  --tag-display: block;
+  --tag-radius: 0.5rem;  /* Less rounded for block tags (8px at 16px base) */
+}

package/src/components/tag/tag.stories.tsx

@@ -48,8 +48,29 @@ const meta: Meta<typeof Tag> = {
   parameters: {
     docs: {
       description: {
-        component:
-          "A small inline label component for displaying status, versions, or environment indicators with WCAG 2.1 AA accessibility compliance.",
+        component: `A small inline label component for displaying status, versions, or environment indicators with WCAG 2.1 AA accessibility compliance.
+
+## CSS Variables
+
+### Spacing
+- \`--tag-padding-inline\`: Horizontal padding (default: 0.7rem / 11.2px)
+- \`--tag-padding-block\`: Vertical padding (default: 0.2rem / 3.2px)
+
+### Typography
+- \`--tag-fs\`: Font size (default: 0.8rem / 12.8px)
+- \`--tag-fw\`: Font weight (default: 500)
+- \`--tag-color\`: Text color (default: currentColor)
+
+### Appearance
+- \`--tag-bg\`: Background color (default: lightgray)
+- \`--tag-radius\`: Border radius (default: 99rem for pill shape, 0.5rem for block)
+- \`--tag-display\`: Display mode (default: inline-block, block for \`<p>\`)
+
+### Variant Colors (WCAG AA Compliant)
+- \`--beta\`: Amber (#fbbf24) - 6.94:1 contrast with black
+- \`--stable\`: Dark green (#0f7c3e) - 4.56:1 contrast with white
+- \`--production\`: Dark blue (#1e3a8a) - 8.59:1 contrast with white
+`,
       },
     },
   },

package/src/components/ui.stories.tsx

@@ -15,7 +15,7 @@ import UI from "./ui";
  * - Zero runtime overhead
  */
 const meta = {
-  title: "FP.UI",
+  title: "FP/UI",
   component: UI,
   tags: ["autodocs", "primitive"],
   parameters: {
@@ -782,7 +782,9 @@ export const CommonAccessibilityMistakes: Story = {
 
         {/* Missing accessible name */}
         <div>
-          <h4 style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}>
+          <h4
+            style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}
+          >
             ❌ BAD: Icon button without accessible name
           </h4>
           <UI
@@ -800,15 +802,24 @@ export const CommonAccessibilityMistakes: Story = {
           >
             ×
           </UI>
-          <p style={{ fontSize: "0.875rem", color: "#721c24", marginTop: "0.5rem" }}>
-            <strong>Problem:</strong> Screen readers cannot identify this button's
-            purpose. <strong>Fix:</strong> Add <code>aria-label="Close"</code>
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "#721c24",
+              marginTop: "0.5rem",
+            }}
+          >
+            <strong>Problem:</strong> Screen readers cannot identify this
+            button's purpose. <strong>Fix:</strong> Add{" "}
+            <code>aria-label="Close"</code>
           </p>
         </div>
 
         {/* Non-semantic clickable div */}
         <div>
-          <h4 style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}>
+          <h4
+            style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}
+          >
             ❌ BAD: Clickable div without keyboard support
           </h4>
           <UI
@@ -825,16 +836,25 @@ export const CommonAccessibilityMistakes: Story = {
           >
             Click me (but you can't use keyboard!)
           </UI>
-          <p style={{ fontSize: "0.875rem", color: "#721c24", marginTop: "0.5rem" }}>
-            <strong>Problem:</strong> Not keyboard accessible or announced to screen
-            readers. <strong>Fix:</strong> Use <code>as="button"</code> or add{" "}
-            <code>role="button"</code>, <code>tabIndex=0</code>, and keyboard handlers.
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "#721c24",
+              marginTop: "0.5rem",
+            }}
+          >
+            <strong>Problem:</strong> Not keyboard accessible or announced to
+            screen readers. <strong>Fix:</strong> Use <code>as="button"</code>{" "}
+            or add <code>role="button"</code>, <code>tabIndex=0</code>, and
+            keyboard handlers.
           </p>
         </div>
 
         {/* Poor contrast focus indicator */}
         <div>
-          <h4 style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}>
+          <h4
+            style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}
+          >
             ❌ BAD: Insufficient focus indicator contrast
           </h4>
           <UI
@@ -851,16 +871,24 @@ export const CommonAccessibilityMistakes: Story = {
           >
             Low contrast focus
           </UI>
-          <p style={{ fontSize: "0.875rem", color: "#721c24", marginTop: "0.5rem" }}>
-            <strong>Problem:</strong> Focus indicator contrast ratio is less than 3:1
-            (WCAG 2.4.7). <strong>Fix:</strong> Use a contrasting color like dark blue
-            on light blue background.
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "#721c24",
+              marginTop: "0.5rem",
+            }}
+          >
+            <strong>Problem:</strong> Focus indicator contrast ratio is less
+            than 3:1 (WCAG 2.4.7). <strong>Fix:</strong> Use a contrasting color
+            like dark blue on light blue background.
           </p>
         </div>
 
         {/* Vague link text */}
         <div>
-          <h4 style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}>
+          <h4
+            style={{ marginTop: 0, marginBottom: "0.5rem", color: "#dc3545" }}
+          >
             ❌ BAD: Non-descriptive link text
           </h4>
           <UI
@@ -873,10 +901,16 @@ export const CommonAccessibilityMistakes: Story = {
           >
             Click here
           </UI>
-          <p style={{ fontSize: "0.875rem", color: "#721c24", marginTop: "0.5rem" }}>
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "#721c24",
+              marginTop: "0.5rem",
+            }}
+          >
             <strong>Problem:</strong> "Click here" doesn't describe the link's
-            destination. <strong>Fix:</strong> Use descriptive text like "View product
-            documentation".
+            destination. <strong>Fix:</strong> Use descriptive text like "View
+            product documentation".
           </p>
         </div>
       </div>