@revikornmann/muka-ui 0.27.2 → 0.27.3

package/dist/types/components/Avatar/Avatar.d.ts

@@ -45,7 +45,10 @@ export interface AvatarProps {
  * - Loading and error states
  * - Clickable support
  *
- * @accessibility WCAG 2.1 AA compliant
+ * @accessibility WCAG 2.1 AA, except initials contrast
+ * - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
+ *   on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
+ *   the accessible name comes from `name`, so always pass it
  * - Requires alt text when using image
  * - Uses role="img" with aria-label for non-image avatars
  * - Status indicators include aria-label

package/dist/types/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/docs/consumers/brand.md

@@ -214,8 +214,12 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
 link.href = `/styles/tokens-acme-${mode}.css`;
 ```
 
-Copy the generated CSS into your static/public directory so those hrefs resolve.
-This is exactly how Muka's own Storybook switches between its ten themes.
+Those hrefs need the generated CSS at a stable URL: have your token build write
+or copy it into your static/public directory, as part of the same `build:tokens`
+step described under [Keeping your brand current](#keeping-your-brand-current).
+Don't keep a hand-made copy there — it stays frozen while the light stylesheet
+moves on, and any token missing from the dark copy shows its light value in dark
+mode. This is exactly how Muka's own Storybook switches between its ten themes.
 
 ## Keeping your brand current
 

package/docs/consumers/setup-instructions.md

@@ -71,9 +71,41 @@ document.getElementById('muka-theme').href =
   `/styles/tokens-${brand}-${mode}.css`;
 ```
 
-Copy the token CSS you need into your static/public directory (or let your
-bundler emit it at a stable URL) so those hrefs resolve. Muka's own Storybook
-switches between all ten themes exactly this way — see
+Those hrefs need the token CSS at a stable URL. Copy it from the installed
+package **as part of every `dev` and `build`** (or let your bundler emit it), so
+it always matches the Muka version you have installed:
+
+```js
+// scripts/sync-theme-tokens.mjs
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+mkdirSync('public/styles', { recursive: true });
+for (const mode of ['light', 'dark']) {
+  const file = `tokens-muka-${mode}.css`;
+  copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
+}
+```
+
+```json
+"scripts": {
+  "sync:themes": "node scripts/sync-theme-tokens.mjs",
+  "dev": "npm run sync:themes && next dev",
+  "build": "npm run sync:themes && next build"
+}
+```
+
+Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
+`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
+scripts by default.
+
+**Never commit a hand-made copy.** It is frozen at the version you copied, and
+each Muka release adds tokens it lacks. A token missing from the dark copy keeps
+the value from the light stylesheet, so new components show light colours in
+dark mode (e.g. a white ring around grouped avatars).
+
+Muka's own Storybook switches between all ten themes this way — see
 `.storybook/ThemeDecorator.ts` in the repo.
 
 ### `data-layout`: the one attribute that does do something

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.27.2",
+  "version": "0.27.3",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/skills/setup-muka/SKILL.md

@@ -82,9 +82,42 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
 link.href = `/styles/tokens-${brand}-${mode}.css`;
 ```
 
-Copy the brand's token CSS into the app's static/public directory (or let the
-bundler emit it with a stable URL) so those hrefs resolve. This is exactly what
-Muka's own Storybook does.
+Those hrefs need the brand's token CSS at a stable URL. Add a script that copies
+it from the installed package into the app's static/public directory, run it
+before `dev` and `build`, and gitignore the copies (or let the bundler emit the
+CSS). Use the brand the app actually loads in place of `muka`:
+
+```js
+// scripts/sync-theme-tokens.mjs
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+mkdirSync('public/styles', { recursive: true });
+for (const mode of ['light', 'dark']) {
+  const file = `tokens-muka-${mode}.css`;
+  copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
+}
+```
+
+```json
+"scripts": {
+  "sync:themes": "node scripts/sync-theme-tokens.mjs",
+  "dev": "npm run sync:themes && next dev",
+  "build": "npm run sync:themes && next build"
+}
+```
+
+Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
+`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
+scripts by default.
+
+**Never commit a hand-made copy.** It is frozen at the version you copied, and
+each Muka release adds tokens it lacks. A token missing from the dark copy keeps
+the value from the light stylesheet, so new components show light colours in
+dark mode (e.g. a white ring around grouped avatars).
+
+This is exactly how Muka's own Storybook switches themes.
 
 ### Fonts come from Muka — do not load them yourself
 

package/tokens/t4-components/avatar.json

@@ -38,6 +38,38 @@
         "$value": "{size.10xl}"
       }
     },
+    "icon": {
+      "size": {
+        "3xs": {
+          "$type": "sizing",
+          "$value": "{size.md}"
+        },
+        "2xs": {
+          "$type": "sizing",
+          "$value": "{size.lg}"
+        },
+        "xs": {
+          "$type": "sizing",
+          "$value": "{size.xl}"
+        },
+        "sm": {
+          "$type": "sizing",
+          "$value": "{size.2xl}"
+        },
+        "md": {
+          "$type": "sizing",
+          "$value": "{size.3xl}"
+        },
+        "lg": {
+          "$type": "sizing",
+          "$value": "{size.4xl}"
+        },
+        "xl": {
+          "$type": "sizing",
+          "$value": "{size.6xl}"
+        }
+      }
+    },
     "color": {
       "background": {
         "default": {
@@ -52,7 +84,7 @@
       "foreground": {
         "default": {
           "$type": "color",
-          "$value": "{color.text.default.default}"
+          "$value": "{color.text.subtle.default}"
         },
         "muted": {
           "$type": "color",