@rokkit/themes 1.3.1 → 1.3.2

package/src/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/src/base/index.css

@@ -50,6 +50,7 @@
 @import './status-list.css';
 @import './step-indicator.css';
 @import './message.css';
+@import './chat.css';
 @import './alert-list.css';
 @import './chart.css';
 @import './swatch.css';

package/src/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/src/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'] {
-  @apply text-on-primary border backdrop-blur-xl bg-primary/60;
+  @apply text-ink border backdrop-blur-xl bg-primary/60;
   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'] {
-  @apply text-on-primary border backdrop-blur-xl bg-accent/60;
+  @apply text-ink border backdrop-blur-xl bg-accent/60;
   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'] {
-  @apply text-on-accent border backdrop-blur-xl bg-accent/60;
+  @apply text-ink border backdrop-blur-xl bg-accent/60;
   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'] {
-  @apply text-on-danger border backdrop-blur-xl bg-danger/60;
+  @apply text-ink border backdrop-blur-xl bg-danger/60;
   border-color: rgba(255, 255, 255, 0.25);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.25),

package/src/frosted/message.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='frosted'] [data-message-root][data-type='error'] {
-  @apply border-error/40 text-error backdrop-blur-sm;
+  @apply border-error/40 backdrop-blur-sm;
   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'] {
-  @apply border-warning/40 text-warning backdrop-blur-sm;
+  @apply border-warning/40 backdrop-blur-sm;
   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'] {
-  @apply border-info/40 text-info backdrop-blur-sm;
+  @apply border-info/40 backdrop-blur-sm;
   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'] {
-  @apply border-success/40 text-success backdrop-blur-sm;
+  @apply border-success/40 backdrop-blur-sm;
   background-color: var(--success-soft);
 }
 [data-style='frosted'] [data-message-root][data-type='success'] [data-message-icon],

package/src/frosted/status-list.css

@@ -14,7 +14,7 @@
   @apply text-warning;
 }
 [data-style='frosted'] [data-status-item][data-status='unknown'] span {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 [data-style='frosted'] [data-status-item][data-status='pass'] {

package/src/frosted/table.css

@@ -9,7 +9,9 @@
    ============================================================================= */
 
 [data-style='frosted'] [data-table-header] th {
-  @apply text-ink-mute border-b backdrop-blur-sm;
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  @apply text-ink border-b backdrop-blur-sm;
   border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
   background-color: color-mix(in oklch, var(--paper-mute) 80%, transparent);
 }

package/src/frosted/tabs.css

@@ -31,9 +31,14 @@
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
-/* Selected state */
+/* Selected state.
+   ink (not primary): the selected pill's bg is a translucent primary tint
+   (bg-primary/40) that composites to a light tint in light mode and a dark
+   tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
+   ink flips with the mode and clears AA on both poles (~10:1 light, ~8.6:1
+   dark). The vibrant primary lives on the border + icon below. */
 [data-style='frosted'] [data-tabs-trigger][data-selected] {
-  @apply bg-primary/40 text-primary border-primary/50 border backdrop-blur-sm;
+  @apply bg-primary/40 text-ink border-primary/50 border backdrop-blur-sm;
 }
 
 /* =============================================================================

package/src/frosted/toggle.css

@@ -28,9 +28,14 @@
   background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
 }
 
-/* Selected state */
+/* Selected state.
+   ink (not primary): the selected bg is a translucent primary tint
+   (bg-primary/40) that composites to a light tint in light mode and a dark
+   tint in dark mode. Vibrant primary text on the light tint is only ~1.6:1.
+   ink flips with the mode and clears AA on both poles. Vibrant primary stays
+   on the border + icon. */
 [data-style='frosted'] [data-toggle-option][data-selected='true'] {
-  @apply bg-primary/40 text-primary border-primary/50 border backdrop-blur-sm;
+  @apply bg-primary/40 text-ink border-primary/50 border backdrop-blur-sm;
 }
 
 /* =============================================================================

package/src/material/button.css

@@ -12,7 +12,9 @@
 [data-style='material'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='material'] [data-button][data-style='default']:not([data-variant]),
 [data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply bg-paper-mute text-ink-mute bg-none shadow-sm;
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  @apply bg-paper-mute text-ink bg-none shadow-sm;
 }
 
 [data-style='material'] [data-button][data-style='default'][data-variant='primary'],

package/src/material/message.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='material'] [data-message-root][data-type='error'] {
-  @apply bg-error-soft border-error text-error shadow-sm;
+  @apply bg-error-soft border-error shadow-sm;
 }
 [data-style='material'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11,7 +11,7 @@
 }
 
 [data-style='material'] [data-message-root][data-type='warning'] {
-  @apply bg-warning-soft border-warning text-warning shadow-sm;
+  @apply bg-warning-soft border-warning shadow-sm;
 }
 [data-style='material'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -19,7 +19,7 @@
 }
 
 [data-style='material'] [data-message-root][data-type='info'] {
-  @apply bg-info-soft border-info text-info shadow-sm;
+  @apply bg-info-soft border-info shadow-sm;
 }
 [data-style='material'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -27,7 +27,7 @@
 }
 
 [data-style='material'] [data-message-root][data-type='success'] {
-  @apply bg-success-soft border-success text-success shadow-sm;
+  @apply bg-success-soft border-success shadow-sm;
 }
 [data-style='material'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='material'] [data-message-root][data-type='success'] [data-message-dismiss] {

package/src/material/select.css

@@ -49,7 +49,9 @@
    ============================================================================= */
 
 [data-style='material'] [data-select-tag] {
-  @apply bg-paper-mute text-ink-mute rounded-full bg-none shadow-sm;
+  /* ink (not ink-mute): the tag holds the selected value (primary content);
+     ink-mute on the paper-mute chip only reaches 4.07:1 in dark mode (AA fail). */
+  @apply bg-paper-mute text-ink rounded-full bg-none shadow-sm;
 }
 
 [data-style='material'] [data-select-tag-remove] {

package/src/material/status-list.css

@@ -14,7 +14,7 @@
   @apply text-warning;
 }
 [data-style='material'] [data-status-item][data-status='unknown'] span {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 [data-style='material'] [data-status-item][data-status='pass'] {

package/src/material/table.css

@@ -9,7 +9,9 @@
    ============================================================================= */
 
 [data-style='material'] [data-table-header] th {
-  @apply text-ink-mute bg-paper-mute border-paper-edge border-b font-medium;
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  @apply text-ink bg-paper-mute border-paper-edge border-b font-medium;
 }
 
 [data-style='material'] [data-table-header-cell][data-sortable='true']:hover {

package/src/material/tabs.css

@@ -20,8 +20,11 @@
    Tab Triggers
    ============================================================================= */
 
+/* ink (not ink-mute): an unselected tab label is an interactive navigation
+   target that must read clearly; ink-mute on the paper-mute tab list only
+   reaches 4.07:1 in dark mode (AA fail). */
 [data-style='material'] [data-tabs-trigger] {
-  @apply text-ink-mute rounded-t-lg bg-transparent;
+  @apply text-ink rounded-t-lg bg-transparent;
 }
 
 [data-style='material'] [data-tabs][data-position='after'] [data-tabs-trigger] {
@@ -29,7 +32,7 @@
 }
 
 [data-style='material'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
-  @apply bg-paper-mute text-ink-mute;
+  @apply bg-paper-mute text-ink;
 }
 
 /* Selected state */

package/src/material/toggle.css

@@ -16,13 +16,16 @@
    Toggle Options
    ============================================================================= */
 
+/* ink (not ink-mute): an unselected option label is an interactive target
+   that must read clearly; ink-mute on the paper-mute container only reaches
+   4.07:1 in dark mode (AA fail). */
 [data-style='material'] [data-toggle-option] {
-  @apply text-ink-mute rounded-full;
+  @apply text-ink rounded-full;
 }
 
 [data-style='material'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='material'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-paper-mute text-ink-mute bg-none;
+  @apply bg-paper-mute text-ink bg-none;
 }
 
 /* Selected state */

package/src/minimal/button.css

@@ -12,7 +12,9 @@
 [data-style='minimal'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='minimal'] [data-button][data-style='default']:not([data-variant]),
 [data-style='minimal'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply bg-paper-mute border-paper-edge text-ink-mute border bg-none;
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  @apply bg-paper-mute border-paper-edge text-ink border bg-none;
 }
 
 [data-style='minimal'] [data-button][data-style='default'][data-variant='primary'],

package/src/minimal/message.css

@@ -3,7 +3,7 @@
  */
 
 [data-style='minimal'] [data-message-root][data-type='error'] {
-  @apply bg-error-soft border-error text-error;
+  @apply bg-error-soft border-error;
 }
 [data-style='minimal'] [data-message-root][data-type='error'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='error'] [data-message-dismiss] {
@@ -11,7 +11,7 @@
 }
 
 [data-style='minimal'] [data-message-root][data-type='warning'] {
-  @apply bg-warning-soft border-warning text-warning;
+  @apply bg-warning-soft border-warning;
 }
 [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='warning'] [data-message-dismiss] {
@@ -19,7 +19,7 @@
 }
 
 [data-style='minimal'] [data-message-root][data-type='info'] {
-  @apply bg-info-soft border-info text-info;
+  @apply bg-info-soft border-info;
 }
 [data-style='minimal'] [data-message-root][data-type='info'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='info'] [data-message-dismiss] {
@@ -27,7 +27,7 @@
 }
 
 [data-style='minimal'] [data-message-root][data-type='success'] {
-  @apply bg-success-soft border-success text-success;
+  @apply bg-success-soft border-success;
 }
 [data-style='minimal'] [data-message-root][data-type='success'] [data-message-icon],
 [data-style='minimal'] [data-message-root][data-type='success'] [data-message-dismiss] {

package/src/minimal/status-list.css

@@ -14,7 +14,7 @@
   @apply text-warning;
 }
 [data-style='minimal'] [data-status-item][data-status='unknown'] span {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 [data-style='minimal'] [data-status-item][data-status='pass'] {

package/src/minimal/table.css

@@ -9,7 +9,9 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-table-header] th {
-  @apply text-ink-mute border-paper-edge border-b bg-paper-mute;
+  /* ink (not ink-mute): column headers are primary content; ink-mute on the
+     paper-mute header only reaches 4.07:1 in dark mode (AA fail). */
+  @apply text-ink border-paper-edge border-b bg-paper-mute;
 }
 
 [data-style='minimal'] [data-table-header-cell][data-sortable='true']:hover {

package/src/minimal/tabs.css

@@ -131,7 +131,7 @@
    ============================================================================= */
 
 [data-style='minimal'] [data-tabs-trigger] [data-tabs-icon] {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 [data-style='minimal'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {

package/src/rokkit/button.css

@@ -26,7 +26,9 @@
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
 [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply border-paper-edge text-ink-mute border;
+  /* ink (not ink-mute): the button label is primary content; ink-mute on the
+     paper-mute fill only reaches 4.07:1 in dark mode (AA fail). */
+  @apply border-paper-edge text-ink border;
   background: var(--paper-mute);
 }