@noxlovette/material 0.8.1 → 0.8.2

package/dist/components/misc/materialAvatarPalette.js

@@ -15,8 +15,24 @@ const CONTAINER_TOKENS = [
 ];
 /** Used server-side, or if a token hasn't been painted yet (styles not loaded). */
 const FALLBACK_PALETTE = ['e9ddff', 'e8def8', 'ffd9e3', 'ffdad6', 'e6e0e9'];
-/** Converts the `rgb(r g b)` (or `rgb(r, g, b)`) format these tokens are always defined in to hex. */
-function rgbStringToHex(value) {
+/**
+ * Converts a token's resolved value to a 6-digit hex. Dev serves the tokens as written in the
+ * theme CSS, `rgb(r g b)` (or `rgb(r, g, b)`), but a production build's CSS minifier rewrites
+ * them to hex (`#d1e5f3`, or the short `#fff`): pulling the numbers out of a hex string reads
+ * its digit runs as channels and yields a near-black colour, so hex is handled on its own.
+ */
+function colorToHex(value) {
+    const hex = value.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+    if (hex) {
+        if (hex.length === 3 || hex.length === 4) {
+            return [...hex.slice(0, 3)]
+                .map((c) => c + c)
+                .join('')
+                .toLowerCase();
+        }
+        // 6 digits, or 8 with alpha (dropped: DiceBear takes opaque backgrounds).
+        return hex.length === 6 || hex.length === 8 ? hex.slice(0, 6).toLowerCase() : undefined;
+    }
     const channels = value.match(/\d+(?:\.\d+)?/g);
     if (!channels || channels.length < 3)
         return undefined;
@@ -38,7 +54,7 @@ export function getMaterialAvatarPalette() {
     const styles = getComputedStyle(document.documentElement);
     const palette = CONTAINER_TOKENS.map((token) => {
         const raw = styles.getPropertyValue(token).trim();
-        return raw ? rgbStringToHex(raw) : undefined;
+        return raw ? colorToHex(raw) : undefined;
     }).filter((hex) => Boolean(hex));
     return palette.length > 0 ? palette : FALLBACK_PALETTE;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [