@vanduo-oss/framework 1.2.5 → 1.2.7

package/css/utilities/color-utilities.css

@@ -0,0 +1,352 @@
+/**
+ * Vanduo Framework - Color Utility Classes
+ *
+ * Per-hue background and text color utilities for all Open Color scales.
+ * Usage:
+ *   Background: .vd-bg-{color}-{shade}  (e.g. .vd-bg-teal-3)
+ *   Text:       .vd-text-{color}-{shade} (e.g. .vd-text-indigo-7)
+ *
+ * Covers 13 hues × 10 shades (0–9) × 2 properties = 260 classes.
+ * All values reference existing CSS custom properties from colors.css.
+ *
+ * @since 1.2.6
+ * @license MIT
+ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * RED
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-red-0 { background-color: var(--red-0); }
+.vd-bg-red-1 { background-color: var(--red-1); }
+.vd-bg-red-2 { background-color: var(--red-2); }
+.vd-bg-red-3 { background-color: var(--red-3); }
+.vd-bg-red-4 { background-color: var(--red-4); }
+.vd-bg-red-5 { background-color: var(--red-5); }
+.vd-bg-red-6 { background-color: var(--red-6); }
+.vd-bg-red-7 { background-color: var(--red-7); }
+.vd-bg-red-8 { background-color: var(--red-8); }
+.vd-bg-red-9 { background-color: var(--red-9); }
+
+.vd-text-red-0 { color: var(--red-0); }
+.vd-text-red-1 { color: var(--red-1); }
+.vd-text-red-2 { color: var(--red-2); }
+.vd-text-red-3 { color: var(--red-3); }
+.vd-text-red-4 { color: var(--red-4); }
+.vd-text-red-5 { color: var(--red-5); }
+.vd-text-red-6 { color: var(--red-6); }
+.vd-text-red-7 { color: var(--red-7); }
+.vd-text-red-8 { color: var(--red-8); }
+.vd-text-red-9 { color: var(--red-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * ORANGE
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-orange-0 { background-color: var(--orange-0); }
+.vd-bg-orange-1 { background-color: var(--orange-1); }
+.vd-bg-orange-2 { background-color: var(--orange-2); }
+.vd-bg-orange-3 { background-color: var(--orange-3); }
+.vd-bg-orange-4 { background-color: var(--orange-4); }
+.vd-bg-orange-5 { background-color: var(--orange-5); }
+.vd-bg-orange-6 { background-color: var(--orange-6); }
+.vd-bg-orange-7 { background-color: var(--orange-7); }
+.vd-bg-orange-8 { background-color: var(--orange-8); }
+.vd-bg-orange-9 { background-color: var(--orange-9); }
+
+.vd-text-orange-0 { color: var(--orange-0); }
+.vd-text-orange-1 { color: var(--orange-1); }
+.vd-text-orange-2 { color: var(--orange-2); }
+.vd-text-orange-3 { color: var(--orange-3); }
+.vd-text-orange-4 { color: var(--orange-4); }
+.vd-text-orange-5 { color: var(--orange-5); }
+.vd-text-orange-6 { color: var(--orange-6); }
+.vd-text-orange-7 { color: var(--orange-7); }
+.vd-text-orange-8 { color: var(--orange-8); }
+.vd-text-orange-9 { color: var(--orange-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * YELLOW
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-yellow-0 { background-color: var(--yellow-0); }
+.vd-bg-yellow-1 { background-color: var(--yellow-1); }
+.vd-bg-yellow-2 { background-color: var(--yellow-2); }
+.vd-bg-yellow-3 { background-color: var(--yellow-3); }
+.vd-bg-yellow-4 { background-color: var(--yellow-4); }
+.vd-bg-yellow-5 { background-color: var(--yellow-5); }
+.vd-bg-yellow-6 { background-color: var(--yellow-6); }
+.vd-bg-yellow-7 { background-color: var(--yellow-7); }
+.vd-bg-yellow-8 { background-color: var(--yellow-8); }
+.vd-bg-yellow-9 { background-color: var(--yellow-9); }
+
+.vd-text-yellow-0 { color: var(--yellow-0); }
+.vd-text-yellow-1 { color: var(--yellow-1); }
+.vd-text-yellow-2 { color: var(--yellow-2); }
+.vd-text-yellow-3 { color: var(--yellow-3); }
+.vd-text-yellow-4 { color: var(--yellow-4); }
+.vd-text-yellow-5 { color: var(--yellow-5); }
+.vd-text-yellow-6 { color: var(--yellow-6); }
+.vd-text-yellow-7 { color: var(--yellow-7); }
+.vd-text-yellow-8 { color: var(--yellow-8); }
+.vd-text-yellow-9 { color: var(--yellow-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * LIME
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-lime-0 { background-color: var(--lime-0); }
+.vd-bg-lime-1 { background-color: var(--lime-1); }
+.vd-bg-lime-2 { background-color: var(--lime-2); }
+.vd-bg-lime-3 { background-color: var(--lime-3); }
+.vd-bg-lime-4 { background-color: var(--lime-4); }
+.vd-bg-lime-5 { background-color: var(--lime-5); }
+.vd-bg-lime-6 { background-color: var(--lime-6); }
+.vd-bg-lime-7 { background-color: var(--lime-7); }
+.vd-bg-lime-8 { background-color: var(--lime-8); }
+.vd-bg-lime-9 { background-color: var(--lime-9); }
+
+.vd-text-lime-0 { color: var(--lime-0); }
+.vd-text-lime-1 { color: var(--lime-1); }
+.vd-text-lime-2 { color: var(--lime-2); }
+.vd-text-lime-3 { color: var(--lime-3); }
+.vd-text-lime-4 { color: var(--lime-4); }
+.vd-text-lime-5 { color: var(--lime-5); }
+.vd-text-lime-6 { color: var(--lime-6); }
+.vd-text-lime-7 { color: var(--lime-7); }
+.vd-text-lime-8 { color: var(--lime-8); }
+.vd-text-lime-9 { color: var(--lime-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * GREEN
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-green-0 { background-color: var(--green-0); }
+.vd-bg-green-1 { background-color: var(--green-1); }
+.vd-bg-green-2 { background-color: var(--green-2); }
+.vd-bg-green-3 { background-color: var(--green-3); }
+.vd-bg-green-4 { background-color: var(--green-4); }
+.vd-bg-green-5 { background-color: var(--green-5); }
+.vd-bg-green-6 { background-color: var(--green-6); }
+.vd-bg-green-7 { background-color: var(--green-7); }
+.vd-bg-green-8 { background-color: var(--green-8); }
+.vd-bg-green-9 { background-color: var(--green-9); }
+
+.vd-text-green-0 { color: var(--green-0); }
+.vd-text-green-1 { color: var(--green-1); }
+.vd-text-green-2 { color: var(--green-2); }
+.vd-text-green-3 { color: var(--green-3); }
+.vd-text-green-4 { color: var(--green-4); }
+.vd-text-green-5 { color: var(--green-5); }
+.vd-text-green-6 { color: var(--green-6); }
+.vd-text-green-7 { color: var(--green-7); }
+.vd-text-green-8 { color: var(--green-8); }
+.vd-text-green-9 { color: var(--green-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * TEAL
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-teal-0 { background-color: var(--teal-0); }
+.vd-bg-teal-1 { background-color: var(--teal-1); }
+.vd-bg-teal-2 { background-color: var(--teal-2); }
+.vd-bg-teal-3 { background-color: var(--teal-3); }
+.vd-bg-teal-4 { background-color: var(--teal-4); }
+.vd-bg-teal-5 { background-color: var(--teal-5); }
+.vd-bg-teal-6 { background-color: var(--teal-6); }
+.vd-bg-teal-7 { background-color: var(--teal-7); }
+.vd-bg-teal-8 { background-color: var(--teal-8); }
+.vd-bg-teal-9 { background-color: var(--teal-9); }
+
+.vd-text-teal-0 { color: var(--teal-0); }
+.vd-text-teal-1 { color: var(--teal-1); }
+.vd-text-teal-2 { color: var(--teal-2); }
+.vd-text-teal-3 { color: var(--teal-3); }
+.vd-text-teal-4 { color: var(--teal-4); }
+.vd-text-teal-5 { color: var(--teal-5); }
+.vd-text-teal-6 { color: var(--teal-6); }
+.vd-text-teal-7 { color: var(--teal-7); }
+.vd-text-teal-8 { color: var(--teal-8); }
+.vd-text-teal-9 { color: var(--teal-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * CYAN
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-cyan-0 { background-color: var(--cyan-0); }
+.vd-bg-cyan-1 { background-color: var(--cyan-1); }
+.vd-bg-cyan-2 { background-color: var(--cyan-2); }
+.vd-bg-cyan-3 { background-color: var(--cyan-3); }
+.vd-bg-cyan-4 { background-color: var(--cyan-4); }
+.vd-bg-cyan-5 { background-color: var(--cyan-5); }
+.vd-bg-cyan-6 { background-color: var(--cyan-6); }
+.vd-bg-cyan-7 { background-color: var(--cyan-7); }
+.vd-bg-cyan-8 { background-color: var(--cyan-8); }
+.vd-bg-cyan-9 { background-color: var(--cyan-9); }
+
+.vd-text-cyan-0 { color: var(--cyan-0); }
+.vd-text-cyan-1 { color: var(--cyan-1); }
+.vd-text-cyan-2 { color: var(--cyan-2); }
+.vd-text-cyan-3 { color: var(--cyan-3); }
+.vd-text-cyan-4 { color: var(--cyan-4); }
+.vd-text-cyan-5 { color: var(--cyan-5); }
+.vd-text-cyan-6 { color: var(--cyan-6); }
+.vd-text-cyan-7 { color: var(--cyan-7); }
+.vd-text-cyan-8 { color: var(--cyan-8); }
+.vd-text-cyan-9 { color: var(--cyan-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * BLUE
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-blue-0 { background-color: var(--blue-0); }
+.vd-bg-blue-1 { background-color: var(--blue-1); }
+.vd-bg-blue-2 { background-color: var(--blue-2); }
+.vd-bg-blue-3 { background-color: var(--blue-3); }
+.vd-bg-blue-4 { background-color: var(--blue-4); }
+.vd-bg-blue-5 { background-color: var(--blue-5); }
+.vd-bg-blue-6 { background-color: var(--blue-6); }
+.vd-bg-blue-7 { background-color: var(--blue-7); }
+.vd-bg-blue-8 { background-color: var(--blue-8); }
+.vd-bg-blue-9 { background-color: var(--blue-9); }
+
+.vd-text-blue-0 { color: var(--blue-0); }
+.vd-text-blue-1 { color: var(--blue-1); }
+.vd-text-blue-2 { color: var(--blue-2); }
+.vd-text-blue-3 { color: var(--blue-3); }
+.vd-text-blue-4 { color: var(--blue-4); }
+.vd-text-blue-5 { color: var(--blue-5); }
+.vd-text-blue-6 { color: var(--blue-6); }
+.vd-text-blue-7 { color: var(--blue-7); }
+.vd-text-blue-8 { color: var(--blue-8); }
+.vd-text-blue-9 { color: var(--blue-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * INDIGO
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-indigo-0 { background-color: var(--indigo-0); }
+.vd-bg-indigo-1 { background-color: var(--indigo-1); }
+.vd-bg-indigo-2 { background-color: var(--indigo-2); }
+.vd-bg-indigo-3 { background-color: var(--indigo-3); }
+.vd-bg-indigo-4 { background-color: var(--indigo-4); }
+.vd-bg-indigo-5 { background-color: var(--indigo-5); }
+.vd-bg-indigo-6 { background-color: var(--indigo-6); }
+.vd-bg-indigo-7 { background-color: var(--indigo-7); }
+.vd-bg-indigo-8 { background-color: var(--indigo-8); }
+.vd-bg-indigo-9 { background-color: var(--indigo-9); }
+
+.vd-text-indigo-0 { color: var(--indigo-0); }
+.vd-text-indigo-1 { color: var(--indigo-1); }
+.vd-text-indigo-2 { color: var(--indigo-2); }
+.vd-text-indigo-3 { color: var(--indigo-3); }
+.vd-text-indigo-4 { color: var(--indigo-4); }
+.vd-text-indigo-5 { color: var(--indigo-5); }
+.vd-text-indigo-6 { color: var(--indigo-6); }
+.vd-text-indigo-7 { color: var(--indigo-7); }
+.vd-text-indigo-8 { color: var(--indigo-8); }
+.vd-text-indigo-9 { color: var(--indigo-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * VIOLET
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-violet-0 { background-color: var(--violet-0); }
+.vd-bg-violet-1 { background-color: var(--violet-1); }
+.vd-bg-violet-2 { background-color: var(--violet-2); }
+.vd-bg-violet-3 { background-color: var(--violet-3); }
+.vd-bg-violet-4 { background-color: var(--violet-4); }
+.vd-bg-violet-5 { background-color: var(--violet-5); }
+.vd-bg-violet-6 { background-color: var(--violet-6); }
+.vd-bg-violet-7 { background-color: var(--violet-7); }
+.vd-bg-violet-8 { background-color: var(--violet-8); }
+.vd-bg-violet-9 { background-color: var(--violet-9); }
+
+.vd-text-violet-0 { color: var(--violet-0); }
+.vd-text-violet-1 { color: var(--violet-1); }
+.vd-text-violet-2 { color: var(--violet-2); }
+.vd-text-violet-3 { color: var(--violet-3); }
+.vd-text-violet-4 { color: var(--violet-4); }
+.vd-text-violet-5 { color: var(--violet-5); }
+.vd-text-violet-6 { color: var(--violet-6); }
+.vd-text-violet-7 { color: var(--violet-7); }
+.vd-text-violet-8 { color: var(--violet-8); }
+.vd-text-violet-9 { color: var(--violet-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * GRAPE
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-grape-0 { background-color: var(--grape-0); }
+.vd-bg-grape-1 { background-color: var(--grape-1); }
+.vd-bg-grape-2 { background-color: var(--grape-2); }
+.vd-bg-grape-3 { background-color: var(--grape-3); }
+.vd-bg-grape-4 { background-color: var(--grape-4); }
+.vd-bg-grape-5 { background-color: var(--grape-5); }
+.vd-bg-grape-6 { background-color: var(--grape-6); }
+.vd-bg-grape-7 { background-color: var(--grape-7); }
+.vd-bg-grape-8 { background-color: var(--grape-8); }
+.vd-bg-grape-9 { background-color: var(--grape-9); }
+
+.vd-text-grape-0 { color: var(--grape-0); }
+.vd-text-grape-1 { color: var(--grape-1); }
+.vd-text-grape-2 { color: var(--grape-2); }
+.vd-text-grape-3 { color: var(--grape-3); }
+.vd-text-grape-4 { color: var(--grape-4); }
+.vd-text-grape-5 { color: var(--grape-5); }
+.vd-text-grape-6 { color: var(--grape-6); }
+.vd-text-grape-7 { color: var(--grape-7); }
+.vd-text-grape-8 { color: var(--grape-8); }
+.vd-text-grape-9 { color: var(--grape-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * PINK
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-pink-0 { background-color: var(--pink-0); }
+.vd-bg-pink-1 { background-color: var(--pink-1); }
+.vd-bg-pink-2 { background-color: var(--pink-2); }
+.vd-bg-pink-3 { background-color: var(--pink-3); }
+.vd-bg-pink-4 { background-color: var(--pink-4); }
+.vd-bg-pink-5 { background-color: var(--pink-5); }
+.vd-bg-pink-6 { background-color: var(--pink-6); }
+.vd-bg-pink-7 { background-color: var(--pink-7); }
+.vd-bg-pink-8 { background-color: var(--pink-8); }
+.vd-bg-pink-9 { background-color: var(--pink-9); }
+
+.vd-text-pink-0 { color: var(--pink-0); }
+.vd-text-pink-1 { color: var(--pink-1); }
+.vd-text-pink-2 { color: var(--pink-2); }
+.vd-text-pink-3 { color: var(--pink-3); }
+.vd-text-pink-4 { color: var(--pink-4); }
+.vd-text-pink-5 { color: var(--pink-5); }
+.vd-text-pink-6 { color: var(--pink-6); }
+.vd-text-pink-7 { color: var(--pink-7); }
+.vd-text-pink-8 { color: var(--pink-8); }
+.vd-text-pink-9 { color: var(--pink-9); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * GRAY
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+.vd-bg-gray-0 { background-color: var(--gray-0); }
+.vd-bg-gray-1 { background-color: var(--gray-1); }
+.vd-bg-gray-2 { background-color: var(--gray-2); }
+.vd-bg-gray-3 { background-color: var(--gray-3); }
+.vd-bg-gray-4 { background-color: var(--gray-4); }
+.vd-bg-gray-5 { background-color: var(--gray-5); }
+.vd-bg-gray-6 { background-color: var(--gray-6); }
+.vd-bg-gray-7 { background-color: var(--gray-7); }
+.vd-bg-gray-8 { background-color: var(--gray-8); }
+.vd-bg-gray-9 { background-color: var(--gray-9); }
+
+.vd-text-gray-0 { color: var(--gray-0); }
+.vd-text-gray-1 { color: var(--gray-1); }
+.vd-text-gray-2 { color: var(--gray-2); }
+.vd-text-gray-3 { color: var(--gray-3); }
+.vd-text-gray-4 { color: var(--gray-4); }
+.vd-text-gray-5 { color: var(--gray-5); }
+.vd-text-gray-6 { color: var(--gray-6); }
+.vd-text-gray-7 { color: var(--gray-7); }
+.vd-text-gray-8 { color: var(--gray-8); }
+.vd-text-gray-9 { color: var(--gray-9); }

package/css/vanduo.css

@@ -70,11 +70,31 @@
 @import url('utilities/media.css');
 @import url('utilities/table.css');
 
+/* Utilities - Color palette (per-hue bg/text classes) */
+@import url('utilities/color-utilities.css');
+
 /* Effects - Phase 7 */
 @import url('effects/parallax.css');
 
 /* Components - Phase 9 (New) */
 @import url('components/draggable.css');
 
+/* Components - Phase 10 (v1.2.7) */
+@import url('components/flow.css');
+@import url('components/bubble.css');
+@import url('components/waypoint.css');
+@import url('components/ripple.css');
+@import url('components/fab.css');
+@import url('components/affix.css');
+@import url('components/suggest.css');
+@import url('components/datepicker.css');
+@import url('components/timepicker.css');
+@import url('components/stepper.css');
+@import url('components/timeline.css');
+@import url('components/rating.css');
+@import url('components/transfer.css');
+@import url('components/tree.css');
+@import url('components/spotlight.css');
+
 /* Print Styles */
 @import url('utilities/print.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.2.5",
-  "builtAt": "2026-03-08T10:52:48.224Z",
-  "commit": "f37c545",
+  "version": "1.2.7",
+  "builtAt": "2026-03-12T16:17:38.253Z",
+  "commit": "2c1277a",
   "mode": "development+production"
 }