@rokkit/themes 1.3.0 → 1.3.2

package/dist/base/chat.css

@@ -0,0 +1,264 @@
+/* Chat — structural + neutral styling for the @rokkit/ui chat components
+   (ChatShell / ChatHistory / ChatTimeline / ChatMessage / ChatComposer).
+
+   The components are headless and emit data-* hooks only; this file owns
+   their visual treatment using the Rokkit named-token vocabulary
+   (--paper, --ink, --accent, …) so it adapts to every theme + mode
+   automatically. Component-intrinsic rules work standalone; shell-context
+   rules (the history rail width, composer inset, scroll) are scoped under
+   [data-chat-shell]. Per-style files may override for flavor. */
+
+/* ─── ChatMessage: avatar + bubble row ──────────────────────────────── */
+[data-chat-message] {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+[data-chat-bubble] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+[data-chat-body] {
+	font: 400 14px/1.55 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-message][data-role='user'] [data-chat-body] {
+	font-family: var(--font-display, var(--font-ui));
+	font-size: 16px;
+	line-height: 1.4;
+	letter-spacing: -0.005em;
+}
+
+/* Inline-code chips in prose — but NOT inside a CodeBlock's <pre><code>. */
+[data-chat-body] code:not([data-code-block] code) {
+	font: 500 12px var(--font-mono);
+	padding: 1px 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 4px;
+	background: var(--paper-soft);
+	color: var(--ink-mute);
+}
+
+[data-chat-time] {
+	margin-top: 6px;
+	font: 500 10.5px var(--font-mono);
+	color: var(--ink-soft);
+	letter-spacing: 0.04em;
+}
+
+/* Streaming caret (data-status='streaming' on the message). */
+[data-chat-caret] {
+	display: inline-block;
+	width: 7px;
+	height: 1.05em;
+	margin-left: 3px;
+	vertical-align: text-bottom;
+	background: var(--accent);
+	border-radius: 1px;
+	animation: rokkit-chat-caret 1s steps(2, start) infinite;
+}
+
+@keyframes rokkit-chat-caret {
+	to {
+		opacity: 0;
+	}
+}
+
+/* ─── ChatTimeline: message list ────────────────────────────────────── */
+[data-chat-timeline] {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 22px;
+	padding: 24px 20px;
+}
+
+/* ─── ChatComposer: input card ──────────────────────────────────────── */
+[data-chat-composer] {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 10px 12px;
+	background: var(--paper-soft);
+	/* Match the standard input chrome: a subtle paper-mute hairline at rest,
+	   darkening to ink-soft on focus — NOT paper-edge (the near-black etched
+	   edge in dark mode, which reads as a heavy border). */
+	border: 1px solid var(--paper-mute);
+	border-radius: 10px;
+	transition: border-color 120ms ease;
+}
+
+/* Single, calm focus affordance — just darken the border (no ring), exactly
+   like [data-input-root]:focus-within. */
+[data-chat-composer]:focus-within {
+	border-color: var(--ink-soft);
+}
+
+/* Disabled — mirror the input disabled treatment (dim + not-allowed). */
+[data-chat-composer]:has([data-chat-input]:disabled) {
+	opacity: 0.55;
+}
+
+[data-chat-input]:disabled {
+	cursor: not-allowed;
+}
+
+[data-chat-input] {
+	width: 100%;
+	min-height: 22px;
+	max-height: 160px;
+	padding: 0;
+	border: 0;
+	outline: none;
+	background: transparent;
+	resize: none;
+	font: 400 14px/1.45 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-input]::placeholder {
+	color: var(--ink-soft);
+}
+
+[data-chat-composer][data-busy] [data-chat-input] {
+	opacity: 0.7;
+}
+
+/* ─── ChatHistory: conversation rail ────────────────────────────────── */
+[data-chat-history] {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow-y: auto;
+	padding: 8px;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-history-new] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 10px;
+	margin-bottom: 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 6px;
+	background: var(--paper-soft);
+	color: var(--ink);
+	font: 500 12.5px var(--font-ui);
+	cursor: pointer;
+}
+
+[data-chat-history-new]:hover {
+	border-color: var(--ink-soft);
+	background: var(--paper);
+}
+
+[data-chat-history-row] {
+	display: flex;
+	align-items: center;
+	border-radius: 6px;
+}
+
+[data-chat-history-row]:hover {
+	background: var(--paper-soft);
+}
+
+[data-chat-history-row][data-active] {
+	background: var(--paper-mute);
+}
+
+[data-chat-history-item] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 7px 8px;
+	border: 0;
+	background: transparent;
+	color: var(--ink-mute);
+	cursor: pointer;
+	text-align: left;
+	font-family: var(--font-ui);
+}
+
+[data-chat-history-row][data-active] [data-chat-history-item] {
+	color: var(--ink);
+}
+
+[data-chat-history-title] {
+	flex: 1;
+	min-width: 0;
+	font: 450 12.5px var(--font-ui);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+[data-chat-history-time] {
+	flex-shrink: 0;
+	font: 500 10px var(--font-mono);
+	color: var(--ink-soft);
+}
+
+[data-chat-history-delete] {
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border: 0;
+	background: transparent;
+	color: var(--ink-soft);
+	border-radius: 4px;
+	cursor: pointer;
+	opacity: 0;
+}
+
+[data-chat-history-row]:hover [data-chat-history-delete] {
+	opacity: 1;
+}
+
+[data-chat-history-delete]:hover {
+	background: var(--paper-mute);
+	color: var(--ink);
+}
+
+/* ─── ChatShell: history rail + main column ─────────────────────────── */
+[data-chat-shell] {
+	display: flex;
+	min-height: 0;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-main] {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Rail chrome only applies inside the shell — a standalone ChatHistory
+   fills its own container instead of imposing a fixed rail width. */
+[data-chat-shell] [data-chat-history] {
+	width: 280px;
+	flex-shrink: 0;
+	border-right: 1px solid var(--paper-edge);
+}
+
+/* Inset the composer from the column edges inside the shell. */
+[data-chat-main] [data-chat-composer] {
+	margin: 0 20px 20px;
+}

package/dist/base/message.css

@@ -31,6 +31,34 @@
   min-width: 0;
 }
 
+/* Contrast-critical (applies to every style): the status soft-bg is a fixed
+   light tint that does NOT flip in dark mode, so the body text must be a fixed
+   DARK tone to stay readable. Darken the status hue toward black — keeps the
+   colour identity and reaches WCAG AA on the light tint in both modes. The
+   icon / border keep the vibrant status-500.
+
+   The same darkened tone is also set on the ROOT (not just [data-message-text]):
+   the root's `color` is the inherited default for any banner text, and the
+   styles set the vibrant `text-{status}` on the root — which fails AA on the
+   light soft-bg. The vibrant icon/dismiss keep their own higher-specificity
+   `text-{status}` rules, so this only re-tones the readable copy. */
+[data-message-root][data-type='error'],
+[data-message-root][data-type='error'] [data-message-text] {
+  color: color-mix(in oklch, var(--error) 55%, black);
+}
+[data-message-root][data-type='warning'],
+[data-message-root][data-type='warning'] [data-message-text] {
+  color: color-mix(in oklch, var(--warning) 55%, black);
+}
+[data-message-root][data-type='info'],
+[data-message-root][data-type='info'] [data-message-text] {
+  color: color-mix(in oklch, var(--info) 55%, black);
+}
+[data-message-root][data-type='success'],
+[data-message-root][data-type='success'] [data-message-text] {
+  color: color-mix(in oklch, var(--success) 55%, black);
+}
+
 [data-message-actions] {
   display: flex;
   align-items: center;

package/dist/base.css

@@ -6013,6 +6013,34 @@ button[data-step-number] {
   min-width: 0;
 }
 
+/* Contrast-critical (applies to every style): the status soft-bg is a fixed
+   light tint that does NOT flip in dark mode, so the body text must be a fixed
+   DARK tone to stay readable. Darken the status hue toward black — keeps the
+   colour identity and reaches WCAG AA on the light tint in both modes. The
+   icon / border keep the vibrant status-500.
+
+   The same darkened tone is also set on the ROOT (not just [data-message-text]):
+   the root's `color` is the inherited default for any banner text, and the
+   styles set the vibrant `text-{status}` on the root — which fails AA on the
+   light soft-bg. The vibrant icon/dismiss keep their own higher-specificity
+   `text-{status}` rules, so this only re-tones the readable copy. */
+[data-message-root][data-type='error'],
+[data-message-root][data-type='error'] [data-message-text] {
+  color: color-mix(in oklch, var(--error) 55%, black);
+}
+[data-message-root][data-type='warning'],
+[data-message-root][data-type='warning'] [data-message-text] {
+  color: color-mix(in oklch, var(--warning) 55%, black);
+}
+[data-message-root][data-type='info'],
+[data-message-root][data-type='info'] [data-message-text] {
+  color: color-mix(in oklch, var(--info) 55%, black);
+}
+[data-message-root][data-type='success'],
+[data-message-root][data-type='success'] [data-message-text] {
+  color: color-mix(in oklch, var(--success) 55%, black);
+}
+
 [data-message-actions] {
   display: flex;
   align-items: center;
@@ -6043,6 +6071,271 @@ button[data-step-number] {
   opacity: 1;
 }
 
+/* Chat — structural + neutral styling for the @rokkit/ui chat components
+   (ChatShell / ChatHistory / ChatTimeline / ChatMessage / ChatComposer).
+
+   The components are headless and emit data-* hooks only; this file owns
+   their visual treatment using the Rokkit named-token vocabulary
+   (--paper, --ink, --accent, …) so it adapts to every theme + mode
+   automatically. Component-intrinsic rules work standalone; shell-context
+   rules (the history rail width, composer inset, scroll) are scoped under
+   [data-chat-shell]. Per-style files may override for flavor. */
+
+/* ─── ChatMessage: avatar + bubble row ──────────────────────────────── */
+[data-chat-message] {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+[data-chat-bubble] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+[data-chat-body] {
+	font: 400 14px/1.55 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-message][data-role='user'] [data-chat-body] {
+	font-family: var(--font-display, var(--font-ui));
+	font-size: 16px;
+	line-height: 1.4;
+	letter-spacing: -0.005em;
+}
+
+/* Inline-code chips in prose — but NOT inside a CodeBlock's <pre><code>. */
+[data-chat-body] code:not([data-code-block] code) {
+	font: 500 12px var(--font-mono);
+	padding: 1px 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 4px;
+	background: var(--paper-soft);
+	color: var(--ink-mute);
+}
+
+[data-chat-time] {
+	margin-top: 6px;
+	font: 500 10.5px var(--font-mono);
+	color: var(--ink-soft);
+	letter-spacing: 0.04em;
+}
+
+/* Streaming caret (data-status='streaming' on the message). */
+[data-chat-caret] {
+	display: inline-block;
+	width: 7px;
+	height: 1.05em;
+	margin-left: 3px;
+	vertical-align: text-bottom;
+	background: var(--accent);
+	border-radius: 1px;
+	animation: rokkit-chat-caret 1s steps(2, start) infinite;
+}
+
+@keyframes rokkit-chat-caret {
+	to {
+		opacity: 0;
+	}
+}
+
+/* ─── ChatTimeline: message list ────────────────────────────────────── */
+[data-chat-timeline] {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 22px;
+	padding: 24px 20px;
+}
+
+/* ─── ChatComposer: input card ──────────────────────────────────────── */
+[data-chat-composer] {
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 10px 12px;
+	background: var(--paper-soft);
+	/* Match the standard input chrome: a subtle paper-mute hairline at rest,
+	   darkening to ink-soft on focus — NOT paper-edge (the near-black etched
+	   edge in dark mode, which reads as a heavy border). */
+	border: 1px solid var(--paper-mute);
+	border-radius: 10px;
+	transition: border-color 120ms ease;
+}
+
+/* Single, calm focus affordance — just darken the border (no ring), exactly
+   like [data-input-root]:focus-within. */
+[data-chat-composer]:focus-within {
+	border-color: var(--ink-soft);
+}
+
+/* Disabled — mirror the input disabled treatment (dim + not-allowed). */
+[data-chat-composer]:has([data-chat-input]:disabled) {
+	opacity: 0.55;
+}
+
+[data-chat-input]:disabled {
+	cursor: not-allowed;
+}
+
+[data-chat-input] {
+	width: 100%;
+	min-height: 22px;
+	max-height: 160px;
+	padding: 0;
+	border: 0;
+	outline: none;
+	background: transparent;
+	resize: none;
+	font: 400 14px/1.45 var(--font-ui);
+	color: var(--ink);
+}
+
+[data-chat-input]::placeholder {
+	color: var(--ink-soft);
+}
+
+[data-chat-composer][data-busy] [data-chat-input] {
+	opacity: 0.7;
+}
+
+/* ─── ChatHistory: conversation rail ────────────────────────────────── */
+[data-chat-history] {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow-y: auto;
+	padding: 8px;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-history-new] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 10px;
+	margin-bottom: 6px;
+	border: 1px solid var(--paper-edge);
+	border-radius: 6px;
+	background: var(--paper-soft);
+	color: var(--ink);
+	font: 500 12.5px var(--font-ui);
+	cursor: pointer;
+}
+
+[data-chat-history-new]:hover {
+	border-color: var(--ink-soft);
+	background: var(--paper);
+}
+
+[data-chat-history-row] {
+	display: flex;
+	align-items: center;
+	border-radius: 6px;
+}
+
+[data-chat-history-row]:hover {
+	background: var(--paper-soft);
+}
+
+[data-chat-history-row][data-active] {
+	background: var(--paper-mute);
+}
+
+[data-chat-history-item] {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 7px 8px;
+	border: 0;
+	background: transparent;
+	color: var(--ink-mute);
+	cursor: pointer;
+	text-align: left;
+	font-family: var(--font-ui);
+}
+
+[data-chat-history-row][data-active] [data-chat-history-item] {
+	color: var(--ink);
+}
+
+[data-chat-history-title] {
+	flex: 1;
+	min-width: 0;
+	font: 450 12.5px var(--font-ui);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+[data-chat-history-time] {
+	flex-shrink: 0;
+	font: 500 10px var(--font-mono);
+	color: var(--ink-soft);
+}
+
+[data-chat-history-delete] {
+	flex-shrink: 0;
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border: 0;
+	background: transparent;
+	color: var(--ink-soft);
+	border-radius: 4px;
+	cursor: pointer;
+	opacity: 0;
+}
+
+[data-chat-history-row]:hover [data-chat-history-delete] {
+	opacity: 1;
+}
+
+[data-chat-history-delete]:hover {
+	background: var(--paper-mute);
+	color: var(--ink);
+}
+
+/* ─── ChatShell: history rail + main column ─────────────────────────── */
+[data-chat-shell] {
+	display: flex;
+	min-height: 0;
+	background: var(--paper);
+	color: var(--ink);
+}
+
+[data-chat-main] {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Rail chrome only applies inside the shell — a standalone ChatHistory
+   fills its own container instead of imposing a fixed rail width. */
+[data-chat-shell] [data-chat-history] {
+	width: 280px;
+	flex-shrink: 0;
+	border-right: 1px solid var(--paper-edge);
+}
+
+/* Inset the composer from the column edges inside the shell. */
+[data-chat-main] [data-chat-composer] {
+	margin: 0 20px 20px;
+}
+
 /* AlertList — base structural styles for the fixed toast container */
 
 [data-alert-list] {

package/dist/frosted/button.css

@@ -21,9 +21,15 @@
     0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
+/* Filled frosted variants use a translucent fill (bg-X/60) that composites
+   over the page, so the effective fill is a diluted tint that flips light/dark
+   with the mode. The auto on-color (computed against the full-opacity status
+   500) is wrong for the diluted fill — near-black on the dark dilution only
+   reaches ~2.4:1. ink flips with the mode and clears AA on both poles
+   (~6.2:1 dark, ~7.8:1 light). */
 [data-style='frosted'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='primary'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -32,7 +38,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='secondary'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -41,7 +47,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='accent'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='accent'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-accent) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -50,7 +56,7 @@
 
 [data-style='frosted'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='frosted'] [data-button]:not([data-style])[data-variant='danger'] {
-  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  border-width:1px;background-color:color-mix(in srgb, var(--color-danger) calc(0.6 * 100%), transparent);--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--ink);
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),

package/dist/frosted/message.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='frosted'] [data-message-root][data-type='error'] {
-  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--error);
+  border-color:color-mix(in srgb, var(--color-error) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--error-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='error'] [data-message-icon],
@@ -12,7 +12,7 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='warning'] {
-  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--warning);
+  border-color:color-mix(in srgb, var(--color-warning) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--warning-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='warning'] [data-message-icon],
@@ -21,7 +21,7 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='info'] {
-  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--info);
+  border-color:color-mix(in srgb, var(--color-info) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--info-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='info'] [data-message-icon],
@@ -30,7 +30,7 @@
 }
 
 [data-style='frosted'] [data-message-root][data-type='success'] {
-  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--success);
+  border-color:color-mix(in srgb, var(--color-success) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
   background-color: var(--success-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],