@revikornmann/muka-ui 0.10.0 → 0.12.0

package/tokens/t2-alias/brand/wireframe/dark.json

@@ -340,6 +340,60 @@
             }
           }
         }
+      },
+      "conversation": {
+        "own": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{color.greenDark.3}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{color.greenDark.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.greenDark.5}"
+          }
+        },
+        "peer": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{alias.color.neutral.1}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{alias.color.neutral.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{alias.color.neutral.5}"
+          }
+        },
+        "agent": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{color.amberDark.3}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{color.amberDark.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.amberDark.5}"
+          }
+        },
+        "meta": {
+          "$type": "color",
+          "$value": "{alias.color.neutral.11}"
+        }
       }
     }
   }

package/tokens/t2-alias/brand/wireframe/light.json

@@ -308,6 +308,60 @@
             }
           }
         }
+      },
+      "conversation": {
+        "own": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{color.green.3}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{color.green.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.green.5}"
+          }
+        },
+        "peer": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{alias.color.neutral.1}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{alias.color.neutral.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{alias.color.neutral.5}"
+          }
+        },
+        "agent": {
+          "surface": {
+            "default": {
+              "$type": "color",
+              "$value": "{color.amber.3}"
+            },
+            "raised": {
+              "$type": "color",
+              "$value": "{color.amber.2}"
+            }
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.amber.5}"
+          }
+        },
+        "meta": {
+          "$type": "color",
+          "$value": "{alias.color.neutral.11}"
+        }
       }
     }
   }

package/tokens/t3-semantics/ui.json

@@ -564,6 +564,196 @@
         }
       }
     },
+    "conversation": {
+      "own": {
+        "background": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.own.surface.default}",
+          "$rag": {
+            "description": "Bubble background for the signed-in user’s own messages",
+            "usage": ["Own chat bubbles", "Sent-message surfaces"],
+            "accessibility": "Pair with color.conversation.own.foreground, which is contrast-checked against it",
+            "relationships": ["color.conversation.own.background", "color.conversation.own.background-raised", "color.conversation.own.border", "color.conversation.own.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "background-raised": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.own.surface.raised}",
+          "$rag": {
+            "description": "Raised surface nested inside a own bubble, such as an embedded card",
+            "usage": ["Embedded cards inside a bubble", "Nested panels"],
+            "accessibility": "Must stay visibly distinct from color.conversation.own.background and keep foreground at 4.5:1",
+            "relationships": ["color.conversation.own.background", "color.conversation.own.background-raised", "color.conversation.own.border", "color.conversation.own.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.own.border}",
+          "$rag": {
+            "description": "Bubble border for the signed-in user’s own messages, reused by any card embedded in it",
+            "usage": ["Own chat bubbles outline", "Embedded card outline"],
+            "accessibility": "Decorative only; never the sole signal distinguishing authors",
+            "relationships": ["color.conversation.own.background", "color.conversation.own.background-raised", "color.conversation.own.border", "color.conversation.own.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.default}",
+          "$rag": {
+            "description": "Body and author text on own bubble surfaces",
+            "usage": ["Message body text", "Author name in the bubble header"],
+            "accessibility": "Must reach 4.5:1 against both color.conversation.own.background and background-raised",
+            "relationships": ["color.conversation.own.background", "color.conversation.own.background-raised", "color.conversation.own.border", "color.conversation.own.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        }
+      },
+      "peer": {
+        "background": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.peer.surface.default}",
+          "$rag": {
+            "description": "Bubble background for another human participant",
+            "usage": ["Peer chat bubbles", "Received-message surfaces"],
+            "accessibility": "Pair with color.conversation.peer.foreground, which is contrast-checked against it",
+            "relationships": ["color.conversation.peer.background", "color.conversation.peer.background-raised", "color.conversation.peer.border", "color.conversation.peer.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "background-raised": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.peer.surface.raised}",
+          "$rag": {
+            "description": "Raised surface nested inside a peer bubble, such as an embedded card",
+            "usage": ["Embedded cards inside a bubble", "Nested panels"],
+            "accessibility": "Must stay visibly distinct from color.conversation.peer.background and keep foreground at 4.5:1",
+            "relationships": ["color.conversation.peer.background", "color.conversation.peer.background-raised", "color.conversation.peer.border", "color.conversation.peer.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.peer.border}",
+          "$rag": {
+            "description": "Bubble border for another human participant, reused by any card embedded in it",
+            "usage": ["Peer chat bubbles outline", "Embedded card outline"],
+            "accessibility": "Decorative only; never the sole signal distinguishing authors",
+            "relationships": ["color.conversation.peer.background", "color.conversation.peer.background-raised", "color.conversation.peer.border", "color.conversation.peer.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.default}",
+          "$rag": {
+            "description": "Body and author text on peer bubble surfaces",
+            "usage": ["Message body text", "Author name in the bubble header"],
+            "accessibility": "Must reach 4.5:1 against both color.conversation.peer.background and background-raised",
+            "relationships": ["color.conversation.peer.background", "color.conversation.peer.background-raised", "color.conversation.peer.border", "color.conversation.peer.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        }
+      },
+      "agent": {
+        "background": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.agent.surface.default}",
+          "$rag": {
+            "description": "Bubble background for an AI agent or the system",
+            "usage": ["Agent chat bubbles", "Assistant-message surfaces"],
+            "accessibility": "Pair with color.conversation.agent.foreground, which is contrast-checked against it",
+            "relationships": ["color.conversation.agent.background", "color.conversation.agent.background-raised", "color.conversation.agent.border", "color.conversation.agent.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "background-raised": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.agent.surface.raised}",
+          "$rag": {
+            "description": "Raised surface nested inside a agent bubble, such as an embedded card",
+            "usage": ["Embedded cards inside a bubble", "Nested panels"],
+            "accessibility": "Must stay visibly distinct from color.conversation.agent.background and keep foreground at 4.5:1",
+            "relationships": ["color.conversation.agent.background", "color.conversation.agent.background-raised", "color.conversation.agent.border", "color.conversation.agent.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{alias.color.conversation.agent.border}",
+          "$rag": {
+            "description": "Bubble border for an AI agent or the system, reused by any card embedded in it",
+            "usage": ["Agent chat bubbles outline", "Embedded card outline"],
+            "accessibility": "Decorative only; never the sole signal distinguishing authors",
+            "relationships": ["color.conversation.agent.background", "color.conversation.agent.background-raised", "color.conversation.agent.border", "color.conversation.agent.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.default}",
+          "$rag": {
+            "description": "Body and author text on agent bubble surfaces",
+            "usage": ["Message body text", "Author name in the bubble header"],
+            "accessibility": "Must reach 4.5:1 against both color.conversation.agent.background and background-raised",
+            "relationships": ["color.conversation.agent.background", "color.conversation.agent.background-raised", "color.conversation.agent.border", "color.conversation.agent.foreground"],
+            "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+            "semantic-meaning": "Authorship in a conversation, not feedback severity",
+            "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+            "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+          }
+        }
+      },
+      "meta": {
+        "$type": "color",
+        "$value": "{alias.color.conversation.meta}",
+        "$rag": {
+          "description": "Secondary conversation text such as timestamps",
+          "usage": ["Message timestamps", "Read receipts"],
+          "accessibility": "Deliberately stronger than color.text.subtle.default, which only reaches ~3:1 on tinted bubble surfaces",
+          "relationships": ["color.conversation.agent.background", "color.conversation.agent.background-raised", "color.conversation.agent.border", "color.conversation.agent.foreground"],
+          "brand-impact": "Medium - conversation surfaces are tuned per brand and mode",
+          "semantic-meaning": "Authorship in a conversation, not feedback severity",
+          "do": ["Use for chat and conversation surfaces", "Tune per brand at the alias layer"],
+          "dont": ["Reuse state colors for authorship", "Use for success, warning or error feedback"]
+        }
+      }
+    },
     "border": {
       "contrast": {
         "$type": "color",

package/tokens/t4-components/bottombar.json

@@ -55,17 +55,23 @@
       },
       "backdrop-end": {
         "$type": "color",
-        "$value": "{color.black-alpha.5}"
-      },
-      "backdrop-blur": {
-        "$type": "dimension",
-        "$value": "2px"
+        "$value": "{color.black-alpha.2}"
       },
       "padding-top": {
         "$type": "dimension",
         "$value": "{spacing.8}"
       }
     },
+    "chat": {
+      "max-width": {
+        "$type": "sizing",
+        "$value": "{container.max-width.lg}"
+      },
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    },
     "tab": {
       "icon-size": {
         "$type": "dimension",

package/tokens/t4-components/chatbubble.json

@@ -0,0 +1,154 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "chatbubble": {
+    "max-width": {
+      "$type": "sizing",
+      "$value": "{container.max-width.sm}"
+    },
+    "radius": {
+      "$type": "borderRadius",
+      "$value": "{border.radius.lg}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{spacing.4}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{spacing.1}"
+    },
+    "body": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.6}"
+      }
+    },
+    "row": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    },
+    "avatar": {
+      "size": {
+        "$type": "sizing",
+        "$value": "{size.4xl}"
+      }
+    },
+    "color": {
+      "own": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.own.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.own.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.own.foreground}"
+        }
+      },
+      "peer": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.peer.foreground}"
+        }
+      },
+      "agent": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.background}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.border}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.conversation.agent.foreground}"
+        }
+      },
+      "timestamp": {
+        "$type": "color",
+        "$value": "{color.conversation.meta}"
+      }
+    },
+    "embed": {
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.2}"
+      },
+      "radius": {
+        "$type": "borderRadius",
+        "$value": "{border.radius.lg}"
+      },
+      "color": {
+        "own": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.own.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.own.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.own.foreground}"
+          }
+        },
+        "peer": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.peer.foreground}"
+          }
+        },
+        "agent": {
+          "background": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.background-raised}"
+          },
+          "border": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.border}"
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "{color.conversation.agent.foreground}"
+          }
+        }
+      }
+    },
+    "action-stack": {
+      "gap": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    }
+  }
+}

package/tokens/t4-components/chatphotogrid.json

@@ -0,0 +1,32 @@
+{
+  "$schema": {
+    "$type": "other",
+    "$value": "https://design-tokens.org/schemas/1.0/schema.json"
+  },
+  "chatphotogrid": {
+    "gap": {
+      "$type": "dimension",
+      "$value": "{spacing.2}"
+    },
+    "radius": {
+      "$type": "borderRadius",
+      "$value": "{border.radius.sm}"
+    },
+    "color": {
+      "placeholder": {
+        "$type": "color",
+        "$value": "{color.surface.level2}"
+      },
+      "overflow": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.surface.backdrop}"
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.text.default.inverse}"
+        }
+      }
+    }
+  }
+}