@openvoxproject/voxblocks 0.9.0 → 0.11.0

package/src/styles/utilities.css

@@ -124,6 +124,19 @@
   color: var(--vox-color-brand-2);
 }
 
+/* Container ------------------------------------------------------------ */
+
+/* Centers content at the same 1280px measure and horizontal padding that
+   vox-header and vox-footer already use internally, so page sections built
+   from other components (vox-hero, vox-grid, etc.) line up with them
+   instead of running edge-to-edge. */
+.vox-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding-left: var(--vox-space-6);
+  padding-right: var(--vox-space-6);
+}
+
 /* Spacing: margin ---------------------------------------------------- */
 
 .vox-m-all-none { margin: 0 !important; }
@@ -289,6 +302,151 @@
 .vox-bg-warning-soft { background-color: var(--vox-color-warning-soft) !important; }
 .vox-bg-danger-soft { background-color: var(--vox-color-danger-soft) !important; }
 
+/* Color: extended palette --------------------------------------------
+   Fixed swatches (see src/tokens/palette.css), not theme-adaptive.
+   Pair a light step's text with the same hue's 900 step, or use a
+   600+ step as a solid fill with white text (vox-color-text-inverse). */
+
+/* gray */
+.vox-color-gray-100 { color: var(--vox-palette-gray-100) !important; }
+.vox-color-gray-200 { color: var(--vox-palette-gray-200) !important; }
+.vox-color-gray-300 { color: var(--vox-palette-gray-300) !important; }
+.vox-color-gray-400 { color: var(--vox-palette-gray-400) !important; }
+.vox-color-gray-500 { color: var(--vox-palette-gray-500) !important; }
+.vox-color-gray-600 { color: var(--vox-palette-gray-600) !important; }
+.vox-color-gray-700 { color: var(--vox-palette-gray-700) !important; }
+.vox-color-gray-800 { color: var(--vox-palette-gray-800) !important; }
+.vox-color-gray-900 { color: var(--vox-palette-gray-900) !important; }
+.vox-bg-gray-100 { background-color: var(--vox-palette-gray-100) !important; }
+.vox-bg-gray-200 { background-color: var(--vox-palette-gray-200) !important; }
+.vox-bg-gray-300 { background-color: var(--vox-palette-gray-300) !important; }
+.vox-bg-gray-400 { background-color: var(--vox-palette-gray-400) !important; }
+.vox-bg-gray-500 { background-color: var(--vox-palette-gray-500) !important; }
+.vox-bg-gray-600 { background-color: var(--vox-palette-gray-600) !important; }
+.vox-bg-gray-700 { background-color: var(--vox-palette-gray-700) !important; }
+.vox-bg-gray-800 { background-color: var(--vox-palette-gray-800) !important; }
+.vox-bg-gray-900 { background-color: var(--vox-palette-gray-900) !important; }
+
+/* teal */
+.vox-color-teal-100 { color: var(--vox-palette-teal-100) !important; }
+.vox-color-teal-200 { color: var(--vox-palette-teal-200) !important; }
+.vox-color-teal-300 { color: var(--vox-palette-teal-300) !important; }
+.vox-color-teal-400 { color: var(--vox-palette-teal-400) !important; }
+.vox-color-teal-500 { color: var(--vox-palette-teal-500) !important; }
+.vox-color-teal-600 { color: var(--vox-palette-teal-600) !important; }
+.vox-color-teal-700 { color: var(--vox-palette-teal-700) !important; }
+.vox-color-teal-800 { color: var(--vox-palette-teal-800) !important; }
+.vox-color-teal-900 { color: var(--vox-palette-teal-900) !important; }
+.vox-bg-teal-100 { background-color: var(--vox-palette-teal-100) !important; }
+.vox-bg-teal-200 { background-color: var(--vox-palette-teal-200) !important; }
+.vox-bg-teal-300 { background-color: var(--vox-palette-teal-300) !important; }
+.vox-bg-teal-400 { background-color: var(--vox-palette-teal-400) !important; }
+.vox-bg-teal-500 { background-color: var(--vox-palette-teal-500) !important; }
+.vox-bg-teal-600 { background-color: var(--vox-palette-teal-600) !important; }
+.vox-bg-teal-700 { background-color: var(--vox-palette-teal-700) !important; }
+.vox-bg-teal-800 { background-color: var(--vox-palette-teal-800) !important; }
+.vox-bg-teal-900 { background-color: var(--vox-palette-teal-900) !important; }
+
+/* blue */
+.vox-color-blue-100 { color: var(--vox-palette-blue-100) !important; }
+.vox-color-blue-200 { color: var(--vox-palette-blue-200) !important; }
+.vox-color-blue-300 { color: var(--vox-palette-blue-300) !important; }
+.vox-color-blue-400 { color: var(--vox-palette-blue-400) !important; }
+.vox-color-blue-500 { color: var(--vox-palette-blue-500) !important; }
+.vox-color-blue-600 { color: var(--vox-palette-blue-600) !important; }
+.vox-color-blue-700 { color: var(--vox-palette-blue-700) !important; }
+.vox-color-blue-800 { color: var(--vox-palette-blue-800) !important; }
+.vox-color-blue-900 { color: var(--vox-palette-blue-900) !important; }
+.vox-bg-blue-100 { background-color: var(--vox-palette-blue-100) !important; }
+.vox-bg-blue-200 { background-color: var(--vox-palette-blue-200) !important; }
+.vox-bg-blue-300 { background-color: var(--vox-palette-blue-300) !important; }
+.vox-bg-blue-400 { background-color: var(--vox-palette-blue-400) !important; }
+.vox-bg-blue-500 { background-color: var(--vox-palette-blue-500) !important; }
+.vox-bg-blue-600 { background-color: var(--vox-palette-blue-600) !important; }
+.vox-bg-blue-700 { background-color: var(--vox-palette-blue-700) !important; }
+.vox-bg-blue-800 { background-color: var(--vox-palette-blue-800) !important; }
+.vox-bg-blue-900 { background-color: var(--vox-palette-blue-900) !important; }
+
+/* green */
+.vox-color-green-100 { color: var(--vox-palette-green-100) !important; }
+.vox-color-green-200 { color: var(--vox-palette-green-200) !important; }
+.vox-color-green-300 { color: var(--vox-palette-green-300) !important; }
+.vox-color-green-400 { color: var(--vox-palette-green-400) !important; }
+.vox-color-green-500 { color: var(--vox-palette-green-500) !important; }
+.vox-color-green-600 { color: var(--vox-palette-green-600) !important; }
+.vox-color-green-700 { color: var(--vox-palette-green-700) !important; }
+.vox-color-green-800 { color: var(--vox-palette-green-800) !important; }
+.vox-color-green-900 { color: var(--vox-palette-green-900) !important; }
+.vox-bg-green-100 { background-color: var(--vox-palette-green-100) !important; }
+.vox-bg-green-200 { background-color: var(--vox-palette-green-200) !important; }
+.vox-bg-green-300 { background-color: var(--vox-palette-green-300) !important; }
+.vox-bg-green-400 { background-color: var(--vox-palette-green-400) !important; }
+.vox-bg-green-500 { background-color: var(--vox-palette-green-500) !important; }
+.vox-bg-green-600 { background-color: var(--vox-palette-green-600) !important; }
+.vox-bg-green-700 { background-color: var(--vox-palette-green-700) !important; }
+.vox-bg-green-800 { background-color: var(--vox-palette-green-800) !important; }
+.vox-bg-green-900 { background-color: var(--vox-palette-green-900) !important; }
+
+/* gold */
+.vox-color-gold-100 { color: var(--vox-palette-gold-100) !important; }
+.vox-color-gold-200 { color: var(--vox-palette-gold-200) !important; }
+.vox-color-gold-300 { color: var(--vox-palette-gold-300) !important; }
+.vox-color-gold-400 { color: var(--vox-palette-gold-400) !important; }
+.vox-color-gold-500 { color: var(--vox-palette-gold-500) !important; }
+.vox-color-gold-600 { color: var(--vox-palette-gold-600) !important; }
+.vox-color-gold-700 { color: var(--vox-palette-gold-700) !important; }
+.vox-color-gold-800 { color: var(--vox-palette-gold-800) !important; }
+.vox-color-gold-900 { color: var(--vox-palette-gold-900) !important; }
+.vox-bg-gold-100 { background-color: var(--vox-palette-gold-100) !important; }
+.vox-bg-gold-200 { background-color: var(--vox-palette-gold-200) !important; }
+.vox-bg-gold-300 { background-color: var(--vox-palette-gold-300) !important; }
+.vox-bg-gold-400 { background-color: var(--vox-palette-gold-400) !important; }
+.vox-bg-gold-500 { background-color: var(--vox-palette-gold-500) !important; }
+.vox-bg-gold-600 { background-color: var(--vox-palette-gold-600) !important; }
+.vox-bg-gold-700 { background-color: var(--vox-palette-gold-700) !important; }
+.vox-bg-gold-800 { background-color: var(--vox-palette-gold-800) !important; }
+.vox-bg-gold-900 { background-color: var(--vox-palette-gold-900) !important; }
+
+/* red */
+.vox-color-red-100 { color: var(--vox-palette-red-100) !important; }
+.vox-color-red-200 { color: var(--vox-palette-red-200) !important; }
+.vox-color-red-300 { color: var(--vox-palette-red-300) !important; }
+.vox-color-red-400 { color: var(--vox-palette-red-400) !important; }
+.vox-color-red-500 { color: var(--vox-palette-red-500) !important; }
+.vox-color-red-600 { color: var(--vox-palette-red-600) !important; }
+.vox-color-red-700 { color: var(--vox-palette-red-700) !important; }
+.vox-color-red-800 { color: var(--vox-palette-red-800) !important; }
+.vox-color-red-900 { color: var(--vox-palette-red-900) !important; }
+.vox-bg-red-100 { background-color: var(--vox-palette-red-100) !important; }
+.vox-bg-red-200 { background-color: var(--vox-palette-red-200) !important; }
+.vox-bg-red-300 { background-color: var(--vox-palette-red-300) !important; }
+.vox-bg-red-400 { background-color: var(--vox-palette-red-400) !important; }
+.vox-bg-red-500 { background-color: var(--vox-palette-red-500) !important; }
+.vox-bg-red-600 { background-color: var(--vox-palette-red-600) !important; }
+.vox-bg-red-700 { background-color: var(--vox-palette-red-700) !important; }
+.vox-bg-red-800 { background-color: var(--vox-palette-red-800) !important; }
+.vox-bg-red-900 { background-color: var(--vox-palette-red-900) !important; }
+
+/* purple */
+.vox-color-purple-100 { color: var(--vox-palette-purple-100) !important; }
+.vox-color-purple-200 { color: var(--vox-palette-purple-200) !important; }
+.vox-color-purple-300 { color: var(--vox-palette-purple-300) !important; }
+.vox-color-purple-400 { color: var(--vox-palette-purple-400) !important; }
+.vox-color-purple-500 { color: var(--vox-palette-purple-500) !important; }
+.vox-color-purple-600 { color: var(--vox-palette-purple-600) !important; }
+.vox-color-purple-700 { color: var(--vox-palette-purple-700) !important; }
+.vox-color-purple-800 { color: var(--vox-palette-purple-800) !important; }
+.vox-color-purple-900 { color: var(--vox-palette-purple-900) !important; }
+.vox-bg-purple-100 { background-color: var(--vox-palette-purple-100) !important; }
+.vox-bg-purple-200 { background-color: var(--vox-palette-purple-200) !important; }
+.vox-bg-purple-300 { background-color: var(--vox-palette-purple-300) !important; }
+.vox-bg-purple-400 { background-color: var(--vox-palette-purple-400) !important; }
+.vox-bg-purple-500 { background-color: var(--vox-palette-purple-500) !important; }
+.vox-bg-purple-600 { background-color: var(--vox-palette-purple-600) !important; }
+.vox-bg-purple-700 { background-color: var(--vox-palette-purple-700) !important; }
+.vox-bg-purple-800 { background-color: var(--vox-palette-purple-800) !important; }
+.vox-bg-purple-900 { background-color: var(--vox-palette-purple-900) !important; }
+
 /* Border ------------------------------------------------------------- */
 
 .vox-border-all { border: 1px solid var(--vox-color-divider) !important; }

package/src/tokens/palette.css

@@ -0,0 +1,95 @@
+/**
+ * VoxBlocks extended color palette.
+ *
+ * Seven hues (gray, teal, blue, green, gold, red, purple), each a fixed
+ * 100-900 tint/shade scale. Unlike the semantic --vox-color-* tokens in
+ * tokens.css, these are raw swatches: constant across light and dark mode,
+ * the same way a can of paint doesn't change color when the lights dim.
+ * Reach for these when a component needs a specific hue rather than a
+ * themed role — data viz series, tags/badges, status chips.
+ *
+ * Every step passes WCAG AA (>=4.5:1) as text against its own scale's
+ * 100 step when paired at least 800 steps apart — e.g. teal-900 text on a
+ * teal-100 background — see docs/guide/colors.md for the full pairing
+ * guidance. Steps 600-900 are dark enough to pair with white text
+ * (--vox-color-text-inverse) as a solid fill.
+ */
+
+:root {
+  /* gray */
+  --vox-palette-gray-100: #f1f3f4;
+  --vox-palette-gray-200: #dde1e3;
+  --vox-palette-gray-300: #c1c9cd;
+  --vox-palette-gray-400: #a0abb1;
+  --vox-palette-gray-500: #7e8e95;
+  --vox-palette-gray-600: #67777e;
+  --vox-palette-gray-700: #535f65;
+  --vox-palette-gray-800: #404a4f;
+  --vox-palette-gray-900: #2c3235;
+
+  /* teal */
+  --vox-palette-teal-100: #eafaf9;
+  --vox-palette-teal-200: #cdf3f1;
+  --vox-palette-teal-300: #a4eae5;
+  --vox-palette-teal-400: #73ded7;
+  --vox-palette-teal-500: #41d2c9;
+  --vox-palette-teal-600: #2cbab0;
+  --vox-palette-teal-700: #23958d;
+  --vox-palette-teal-800: #1b746e;
+  --vox-palette-teal-900: #124e4a;
+
+  /* blue */
+  --vox-palette-blue-100: #e9f2fb;
+  --vox-palette-blue-200: #cadff6;
+  --vox-palette-blue-300: #9fc4ef;
+  --vox-palette-blue-400: #6aa4e7;
+  --vox-palette-blue-500: #3584de;
+  --vox-palette-blue-600: #206dc5;
+  --vox-palette-blue-700: #1a579e;
+  --vox-palette-blue-800: #14447b;
+  --vox-palette-blue-900: #0e2e53;
+
+  /* green */
+  --vox-palette-green-100: #ecf9f1;
+  --vox-palette-green-200: #d1f0dc;
+  --vox-palette-green-300: #abe3bf;
+  --vox-palette-green-400: #7dd49d;
+  --vox-palette-green-500: #4fc47a;
+  --vox-palette-green-600: #39ac63;
+  --vox-palette-green-700: #2e8a50;
+  --vox-palette-green-800: #246b3e;
+  --vox-palette-green-900: #18492a;
+
+  /* gold */
+  --vox-palette-gold-100: #fdf6e8;
+  --vox-palette-gold-200: #f9e9c7;
+  --vox-palette-gold-300: #f5d699;
+  --vox-palette-gold-400: #efc061;
+  --vox-palette-gold-500: #eaaa2a;
+  --vox-palette-gold-600: #d19215;
+  --vox-palette-gold-700: #a77511;
+  --vox-palette-gold-800: #825b0d;
+  --vox-palette-gold-900: #583e09;
+
+  /* red */
+  --vox-palette-red-100: #fbeaeb;
+  --vox-palette-red-200: #f5cccf;
+  --vox-palette-red-300: #eda1a7;
+  --vox-palette-red-400: #e36d77;
+  --vox-palette-red-500: #d93a47;
+  --vox-palette-red-600: #c12532;
+  --vox-palette-red-700: #9a1d28;
+  --vox-palette-red-800: #78171f;
+  --vox-palette-red-900: #511015;
+
+  /* purple */
+  --vox-palette-purple-100: #f1ecf9;
+  --vox-palette-purple-200: #ded1f0;
+  --vox-palette-purple-300: #c2abe3;
+  --vox-palette-purple-400: #a17dd4;
+  --vox-palette-purple-500: #804fc4;
+  --vox-palette-purple-600: #6939ac;
+  --vox-palette-purple-700: #542e8a;
+  --vox-palette-purple-800: #41246b;
+  --vox-palette-purple-900: #2c1849;
+}

package/src/tokens/tokens.css

@@ -29,8 +29,8 @@
   --vox-color-warning-1: #915930;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.14);
   --vox-color-danger-1: #b8272c;
-  --vox-color-danger-2: #d5393e;
-  --vox-color-danger-3: #e0575b;
+  --vox-color-danger-2: #c9333a;
+  --vox-color-danger-3: #d5393e;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.14);
 
   /* Surfaces */
@@ -42,12 +42,12 @@
   /* Text */
   --vox-color-text-1: #12262c;
   --vox-color-text-2: #4c6469;
-  --vox-color-text-3: #86999c;
+  --vox-color-text-3: #5c7377;
   --vox-color-text-inverse: #ffffff;
 
   /* Lines */
   --vox-color-divider: rgba(18, 38, 44, 0.12);
-  --vox-color-border: rgba(18, 38, 44, 0.28);
+  --vox-color-border: rgba(18, 38, 44, 0.55);
 
   /* Typography */
   --vox-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system,
@@ -92,7 +92,7 @@
   --vox-color-warning-1: #f9b44e;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.16);
   --vox-color-danger-1: #f66f81;
-  --vox-color-danger-2: #f14158;
+  --vox-color-danger-2: #d13b52;
   --vox-color-danger-3: #b62a3c;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.16);
 
@@ -103,11 +103,11 @@
 
   --vox-color-text-1: #dff3f0;
   --vox-color-text-2: #9fb8bb;
-  --vox-color-text-3: #5f7275;
+  --vox-color-text-3: #88999c;
   --vox-color-text-inverse: #ffffff;
 
   --vox-color-divider: rgba(159, 184, 187, 0.24);
-  --vox-color-border: rgba(159, 184, 187, 0.5);
+  --vox-color-border: rgba(159, 184, 187, 0.6);
 
   --vox-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.24);
   --vox-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.26);