@roxyapi/ui 0.3.0 → 0.4.0

package/src/styles/tokens.css

@@ -90,15 +90,12 @@
 	--roxy-motion-duration: 200ms;
 	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
-	/* Heat scale: 7-step gradient used by ashtakavarga bindu cells.
-	 * Low bindus (1) are cool green; high bindus (7+) are hot red. */
-	--roxy-heat-1: #f0fdf4;
-	--roxy-heat-2: #d1fae5;
-	--roxy-heat-3: #a7f3d0;
-	--roxy-heat-4: #fde68a;
-	--roxy-heat-5: #fdba74;
-	--roxy-heat-6: #fb923c;
-	--roxy-heat-7: #ef4444;
+	/* Heat scale: a single base hue. Consumers mix it with `transparent` at
+	 * increasing percentages to paint cooler-to-hotter tiers. The mix-with-
+	 * transparent approach lets the page bg show through and keeps text
+	 * colour stable (always --roxy-fg), so the cells read in both themes
+	 * without per-tier text colours. */
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Dark theme via system preference */
@@ -134,13 +131,7 @@
 			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-		--roxy-heat-1: #052e16;
-		--roxy-heat-2: #14532d;
-		--roxy-heat-3: #166534;
-		--roxy-heat-4: #92400e;
-		--roxy-heat-5: #b45309;
-		--roxy-heat-6: #c2410c;
-		--roxy-heat-7: #b91c1c;
+		--roxy-heat: var(--roxy-danger, #ef4444);
 	}
 }
 
@@ -205,13 +196,7 @@
 		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-	--roxy-heat-1: #052e16;
-	--roxy-heat-2: #14532d;
-	--roxy-heat-3: #166534;
-	--roxy-heat-4: #92400e;
-	--roxy-heat-5: #b45309;
-	--roxy-heat-6: #c2410c;
-	--roxy-heat-7: #b91c1c;
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Reduced motion override */

package/src/utils/base-styles.ts

@@ -86,4 +86,18 @@ export const baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;