@fpkit/acss 4.0.0 → 4.1.0

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";