@fpkit/acss 3.9.0 → 4.1.0

package/src/sass/tokens/_color-semantic.scss

@@ -0,0 +1,144 @@
+/**
+ * Color Semantic Tokens - Purpose Layer (Tier 2)
+ *
+ * Intent-based color mappings for common use cases.
+ * All semantic tokens reference primitive tokens (Tier 1).
+ *
+ * Pattern: --color-{purpose}-{variant}
+ *
+ * This layer provides meaning to colors and enables easy theming.
+ * To theme the application, override these semantic tokens.
+ */
+
+:root {
+  /* ========================================
+     Brand Colors
+     Purpose: Primary and secondary brand identity
+     ======================================== */
+
+  /* Primary brand color - Main CTAs, primary buttons, primary links */
+  --color-primary: var(--color-blue-600);           /* #2563eb */
+  --color-primary-hover: var(--color-blue-700);     /* #1d4ed8 */
+  --color-primary-active: var(--color-blue-800);    /* #1e40af */
+  --color-primary-light: var(--color-blue-100);     /* #dbeafe */
+
+  /* Secondary brand color - Secondary actions, alternative emphasis */
+  --color-secondary: var(--color-neutral-700);      /* #404040 */
+  --color-secondary-hover: var(--color-neutral-800);/* #262626 */
+  --color-secondary-light: var(--color-neutral-100);/* #f5f5f5 */
+
+  /* ========================================
+     State Colors - Success
+     Purpose: Positive feedback, valid inputs, confirmations
+     ======================================== */
+
+  --color-success: var(--color-green-600);          /* #16a34a */
+  --color-success-bg: var(--color-green-100);       /* #dcfce7 */
+  --color-success-border: var(--color-green-600);   /* #16a34a */
+  --color-success-text: var(--color-green-800);     /* #166534 */
+  --color-success-hover: var(--color-green-700);    /* #15803d */
+
+  /* ========================================
+     State Colors - Error
+     Purpose: Errors, validation failures, destructive actions
+     ======================================== */
+
+  --color-error: var(--color-red-600);              /* #dc2626 */
+  --color-error-bg: var(--color-red-100);           /* #fee2e2 */
+  --color-error-border: var(--color-red-600);       /* #dc2626 */
+  --color-error-text: var(--color-red-800);         /* #991b1b */
+  --color-error-hover: var(--color-red-700);        /* #b91c1c */
+
+  /* ========================================
+     State Colors - Warning
+     Purpose: Warnings, cautions, pending actions
+     ======================================== */
+
+  --color-warning: var(--color-amber-600);          /* #d97706 */
+  --color-warning-bg: var(--color-amber-100);       /* #fef3c7 */
+  --color-warning-border: var(--color-amber-600);   /* #d97706 */
+  --color-warning-text: var(--color-amber-800);     /* #92400e */
+  --color-warning-hover: var(--color-amber-700);    /* #b45309 */
+
+  /* ========================================
+     State Colors - Info
+     Purpose: Informational messages, tips, notices
+     ======================================== */
+
+  --color-info: var(--color-blue-500);              /* #3b82f6 */
+  --color-info-bg: var(--color-blue-100);           /* #dbeafe */
+  --color-info-border: var(--color-blue-500);       /* #3b82f6 */
+  --color-info-text: var(--color-blue-900);         /* #1e3a8a */
+  --color-info-hover: var(--color-blue-600);        /* #2563eb */
+
+  /* ========================================
+     UI Surface Colors
+     Purpose: Backgrounds, containers, cards, modals
+     ======================================== */
+
+  --color-surface: var(--color-neutral-0);          /* #ffffff - Primary background */
+  --color-surface-secondary: var(--color-neutral-50);/* #fafafa - Secondary background */
+  --color-surface-tertiary: var(--color-neutral-100);/* #f5f5f5 - Tertiary background */
+  --color-surface-elevated: var(--color-neutral-0); /* #ffffff - Cards, modals, raised elements */
+  --color-surface-overlay: rgba(0, 0, 0, 0.5);      /* Modal overlay, backdrop */
+
+  /* ========================================
+     Border Colors
+     Purpose: Borders, dividers, separators, outlines
+     ======================================== */
+
+  --color-border: var(--color-neutral-300);         /* #d4d4d4 - Default borders */
+  --color-border-subtle: var(--color-neutral-200);  /* #e5e5e5 - Subtle borders, dividers */
+  --color-border-strong: var(--color-neutral-400);  /* #a3a3a3 - Emphasized borders */
+  --color-border-interactive: var(--color-neutral-400);/* #a3a3a3 - Hover borders on inputs */
+
+  /* ========================================
+     Text Colors
+     Purpose: Body text, headings, labels, captions
+     ======================================== */
+
+  --color-text: var(--color-neutral-800);           /* #262626 - Primary body text */
+  --color-text-secondary: var(--color-neutral-700); /* #404040 - Secondary text, labels */
+  --color-text-tertiary: var(--color-neutral-600);  /* #525252 - Tertiary text, captions */
+  --color-text-disabled: var(--color-neutral-500);  /* #737373 - Disabled text */
+  --color-text-inverse: var(--color-neutral-0);     /* #ffffff - Text on dark backgrounds */
+
+  /* ========================================
+     Interactive States
+     Purpose: Focus, hover, active, disabled states
+     ======================================== */
+
+  --color-focus: var(--color-blue-600);             /* #2563eb - Focus outlines (WCAG 3:1 contrast) */
+  --color-focus-ring: var(--color-blue-600);        /* #2563eb - Focus rings on inputs */
+  --color-hover-overlay: rgba(0, 0, 0, 0.05);       /* Subtle hover overlay on buttons */
+  --color-active-overlay: rgba(0, 0, 0, 0.1);       /* Active/pressed overlay on buttons */
+  --color-disabled-bg: var(--color-neutral-100);    /* #f5f5f5 - Disabled backgrounds */
+  --color-disabled-text: var(--color-neutral-500);  /* #737373 - Disabled text */
+
+  /* ========================================
+     Link Colors
+     Purpose: Hyperlinks, navigation links
+     ======================================== */
+
+  --color-link: var(--color-blue-700);              /* #1d4ed8 - Default link color */
+  --color-link-hover: var(--color-blue-800);        /* #1e40af - Link hover state */
+  --color-link-visited: var(--color-blue-900);      /* #1e3a8a - Visited link color */
+  --color-link-active: var(--color-blue-800);       /* #1e40af - Link active/pressed state */
+
+  /* ========================================
+     Validation Colors
+     Purpose: Form validation, required fields
+     ======================================== */
+
+  --color-required: var(--color-red-600);           /* #dc2626 - Required field indicators */
+  --color-valid: var(--color-green-600);            /* #16a34a - Valid input indicators */
+  --color-invalid: var(--color-red-600);            /* #dc2626 - Invalid input indicators */
+
+  /* ========================================
+     Skip Link & Accessibility
+     Purpose: Skip navigation, accessibility utilities
+     ======================================== */
+
+  --color-skip-link-bg: var(--color-neutral-100);   /* #f5f5f5 - Skip link background */
+  --color-skip-link-text: var(--color-text);        /* Inherits default text color */
+}

package/src/sass/tokens/_index.scss

@@ -0,0 +1,15 @@
+/**
+ * Color Tokens - Main Export
+ *
+ * This file exports the complete color token system.
+ * Import order matters: primitives must load before semantic tokens.
+ *
+ * Usage in main index.scss:
+ * @use "./sass/tokens";
+ */
+
+/* Tier 1: Primitive color scales (foundation) */
+@forward "./color-primitives";
+
+/* Tier 2: Semantic color mappings (purpose-based) */
+@forward "./color-semantic";

package/src/sass/utilities/_color-bg.scss

@@ -0,0 +1,62 @@
+/**
+ * Background Color Utilities
+ *
+ * Semantic background color utility classes for quick styling.
+ * All utilities reference semantic tokens (Tier 2), not primitives.
+ *
+ * Usage:
+ * <div class="bg-primary">Primary background</div>
+ * <div class="bg-success">Success background</div>
+ */
+
+/* ========================================
+   Brand Backgrounds
+   ======================================== */
+
+.bg-primary {
+  background-color: var(--color-primary);
+}
+
+.bg-primary-light {
+  background-color: var(--color-primary-light);
+}
+
+.bg-secondary {
+  background-color: var(--color-secondary-light);
+}
+
+/* ========================================
+   State Backgrounds
+   ======================================== */
+
+.bg-success {
+  background-color: var(--color-success-bg);
+}
+
+.bg-error {
+  background-color: var(--color-error-bg);
+}
+
+.bg-warning {
+  background-color: var(--color-warning-bg);
+}
+
+.bg-info {
+  background-color: var(--color-info-bg);
+}
+
+/* ========================================
+   Surface Backgrounds
+   ======================================== */
+
+.bg-surface {
+  background-color: var(--color-surface);
+}
+
+.bg-surface-secondary {
+  background-color: var(--color-surface-secondary);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}

package/src/sass/utilities/_color-border.scss

@@ -0,0 +1,61 @@
+/**
+ * Border Color Utilities
+ *
+ * Semantic border color utility classes for quick styling.
+ * All utilities reference semantic tokens (Tier 2), not primitives.
+ *
+ * Note: These utilities only set border-color.
+ * You may need to set border-width and border-style separately.
+ *
+ * Usage:
+ * <div class="border-primary" style="border: 1px solid;">
+ * <div class="border-error" style="border-width: 2px; border-style: solid;">
+ */
+
+/* ========================================
+   Brand Borders
+   ======================================== */
+
+.border-primary {
+  border-color: var(--color-primary);
+}
+
+.border-secondary {
+  border-color: var(--color-secondary);
+}
+
+/* ========================================
+   State Borders
+   ======================================== */
+
+.border-success {
+  border-color: var(--color-success-border);
+}
+
+.border-error {
+  border-color: var(--color-error-border);
+}
+
+.border-warning {
+  border-color: var(--color-warning-border);
+}
+
+.border-info {
+  border-color: var(--color-info-border);
+}
+
+/* ========================================
+   UI Borders
+   ======================================== */
+
+.border-default {
+  border-color: var(--color-border);
+}
+
+.border-subtle {
+  border-color: var(--color-border-subtle);
+}
+
+.border-transparent {
+  border-color: transparent;
+}

package/src/sass/utilities/_color-text.scss

@@ -0,0 +1,58 @@
+/**
+ * Text Color Utilities
+ *
+ * Semantic text color utility classes for quick styling.
+ * All utilities reference semantic tokens (Tier 2), not primitives.
+ *
+ * Usage:
+ * <p class="text-primary">Primary text</p>
+ * <span class="text-error">Error message</span>
+ */
+
+/* ========================================
+   Brand Text Colors
+   ======================================== */
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-secondary {
+  color: var(--color-secondary);
+}
+
+/* ========================================
+   State Text Colors
+   ======================================== */
+
+.text-success {
+  color: var(--color-success-text);
+}
+
+.text-error {
+  color: var(--color-error-text);
+}
+
+.text-warning {
+  color: var(--color-warning-text);
+}
+
+.text-info {
+  color: var(--color-info-text);
+}
+
+/* ========================================
+   Text Hierarchy Colors
+   ======================================== */
+
+.text-muted {
+  color: var(--color-text-tertiary);
+}
+
+.text-disabled {
+  color: var(--color-text-disabled);
+}
+
+.text-inverse {
+  color: var(--color-text-inverse);
+}

package/src/sass/utilities/_index.scss

@@ -0,0 +1,17 @@
+/**
+ * Utilities - Main Export
+ *
+ * This file exports all utility classes.
+ * Utilities are loaded after tokens and base styles, before components.
+ *
+ * Usage in main index.scss:
+ * @use "./sass/utilities";
+ */
+
+/* Existing utilities */
+@forward "../../styles/utilities/disabled";
+
+/* New color utilities (semantic only) */
+@forward "./color-text";
+@forward "./color-bg";
+@forward "./color-border";